In AngularJS I would like to test a boolean value inside a directive, but the value is returned as a string.
Here is the code:
angular.module('TestApp', ['TestApp.services', 'TestApp.controllers', 'TestApp.directives']);
angular.module('TestApp.services', ['ngResource']).
factory('Obj', function($resource){
return $resource('datas.json');
});
angular.module('TestApp.controllers', []).
controller('TestCtrl', ['$scope', 'Obj', function($scope, Obj) {
$scope.objs = Obj.query();
}]);
angular.module('TestApp.directives', []).
directive('requiredStatus', function() {
return function(scope, elm, attrs) {
attrs.$observe('v', function(av) {
if (attrs.completed) {
scope.val= true;
} else {
scope.val= false;
}
scope.type = typeof attrs.completed;
});
};
});
http://plnkr.co/edit/DvIvySFRCYaz4SddEvJk
What should I do to have a typeof "boolean" inside the directive?
Use $watch, which will evaluate the observed attribute expression against the scope:
scope.$watch(attrs.completed, function(completed) {
scope.val = completed;
scope.type = typeof completed;
});
or use scope.$eval:
scope.val = scope.$eval(attrs.completed);
scope.type = typeof scope.val;
DEMO PLUNKER
Related
I have a value named $scope.title in my controller. This value is initialized with $scope.title = 'global.loading';. I have a factory named Product.
My view is calling a directive via <menu-top ng-title="title"></menu-top>, the view of this directive is <span>{{title|translate}}</span>.
When I want to get a product I do : Product.get(id). Their is two possibility.
First one (working) -> My product is cached in localstorage and my title in the directive is uptated.
Second one (not working) -> My product is not cached, I call my WebService, put the response in cache and return the response. In this case, the title is updated (console.log) in the controller, but not in my directive ...
angular.module('angularApp')
.directive('menuTop', function () {
return {
templateUrl: 'views/directives/menutop.html',
restrict: 'E',
scope:{
ngTitle: '=?'
},
link: function postLink(scope) {
scope.title = scope.ngTitle;
}
};
});
angular.module('angularApp')
.controller('ProductCtrl', function ($scope, $routeParams, Product) {
$scope.productId = parseInt($routeParams.product);
$scope.title = 'global.loading';
$scope.loading = true;
$scope.error = false;
$scope.product = null;
Product
.get($scope.productId)
.then(function(product){
$scope.loading = false;
$scope.title = product.name;
$scope.product = product;
}, function(){
$scope.error = true;
$scope.loading = false;
})
;
});
angular.module('angularApp')
.factory('Product', function ($http, responseHandler, ApiLink, LocalStorage, $q) {
var _get = function(id) {
return $q(function(resolve, reject) {
var key = 'catalog/product/' + id;
var ret = LocalStorage.getObject(key);
if (ret) {
return resolve(ret);
}
responseHandler
.handle($http({
method: 'GET',
url: ApiLink.get('catalog', 'product', {id: id})
}))
.then(function(response) {
if (response.product && response.product.name) {
LocalStorage.putObject(key, response.product, 60 * 5);
return resolve(response.product);
}
reject(null);
}, function() {
reject(null);
});
});
};
return {
'get': _get
};
});
Thank you for your help !
As Sergio Tulentsev suggested, you can use '#' as binding method.
Using # will interpolate the value. It means that you can use it as a readonly this way : ng-title="{{mytitle}}"
angular.module('angularApp')
.directive('menuTop', function () {
return {
templateUrl: 'views/directives/menutop.html',
restrict: 'E',
scope:{
ngTitle: '#'
},
link: function postLink(scope) {
scope.title = scope.ngTitle;
}
};
});
Also keep in mind that you shouldn't use "ng" for your custom directives. ng is used for angular natives components. You can (should) keep this naming convention with your application name. Like for an application "MyStats" your could name your components ms-directivename
If you need more informations about the directives bindings you can refer to this documentation
I'm using the new AngularJS async validators feature introduced in 1.3. I have a directive that looks like this:
angular.module('app')
.directive('usernameValidator', function(API_ENDPOINT, $http, $q, _) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.username = function(username) {
return $http.get(API_ENDPOINT.user, {userName: username})
.then(function(response) {
var username = response.data;
if (_.isEmpty(username)) {
return true;
} else {
return $q.reject(username.error);
}
}, function() {
return $q.reject();
});
};
}
};
});
I'd like to somehow get the value of username.error into the model controller scope so I can display it to the user. Displaying a static message is easy, however I want to display some of the error context information returned by the server as well.
Is there a clean way to do this or am I stuck with setting properties on the model controller?
Edit: To clarify, I am not looking for a one-off solution that just works. I intend to use this directive as a reusable, cleanly encapsulated component. This means directly writing to the surrounding scope or anything like that is probably not acceptable.
the validation directive is just like any other directive, you have access to $scope, so why not set the value as it: $scope.errors.username = username.error;
angular.module('app')
.directive('usernameValidator', function(API_ENDPOINT, $http, $q, _) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
$scope.errors = $scope.errors | {}; //initialize it
ngModel.$asyncValidators.username = function(username) {
return $http.get(API_ENDPOINT.user, {userName: username})
.then(function(response) {
var username = response.data;
if (_.isEmpty(username)) {
return true;
} else {
$scope.errors.username = username.error; //set it here
return $q.reject(username.error);
}
}, function() {
return $q.reject();
});
};
}
};
});
I just initialized it separately $scope.errors = $scope.errors | {}; //initialize it so that you can reuse $scope.errors object in multiple directives if you wish it
Why not have a global alerts array of alerts that you can push an error onto.
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"><span ng-class="alert.icon"></span> {{alert.msg}}</alert>
Doing this, the alert can be a success or warning or whatever. And can be called from the global scope. Which I think is good so an async task in some random place you called can place an alert into the stack. Just an idea....
You can pass an empty variable, and set it on reject:
angular.module('app')
.directive('usernameValidator', function(API_ENDPOINT, $http, $q, _) {
return {
require: 'ngModel',
scope: {
errorMessage: '=usernameValidator'
},
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.username = function(username) {
return $http.get(API_ENDPOINT.user, {userName: username})
.then(function(response) {
var username = response.data;
if (_.isEmpty(username)) {
return true;
} else {
//set it here
$scope.errorMessage = username.error;
return $q.reject(username.error);
}
}, function() {
return $q.reject();
});
};
}
};
});
And in your template:
<input
ng-model="model.email"
username-validation="userValidationError"
name="email"
type="text">
<p class="error" ng-if="form.email.$error">{{userValidationError}}</p>
I am trying to unit test a directive that uses ngModel and having difficulties. It seems that the link function of my directive is never being called...
Here is my directive code:
coreModule.directive('coreUnit', ['$timeout', function ($timeout) {
return {
restrict: 'E',
require: '?ngModel',
template: "{{output}}",
link: function (scope, elem, attrs, ngModelCtrl) {
ngModelCtrl.$render = function () {
render(ngModelCtrl.$modelValue);
};
console.log("called");
function render(unit) {
if (unit) {
var output = '(' +
unit.numerator +
(unit.denominator == '' ? '' : '/') +
unit.denominator +
(unit.rate == 'NONE' || unit.rate == '' ? '' : '/' + unit.rate) +
')';
scope.output = output == '()' ? '' : output;
}
}
}
}
}]);
Here is my test spec:
describe('core', function () {
describe('coreUnitDirective', function () {
beforeEach(module('core'));
var scope,
elem;
var tpl = '<core-unit ng-model="myUnit"></core-unit>';
beforeEach(inject(function ($rootScope, $compile) {
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));
it('the unit should be empty', function () {
expect(elem.html()).toBe('');
});
it('should show (boe)', function () {
scope.myUnit = {
numerator: 'boe',
denominator: "",
rate: ""
};
scope.$digest();
expect(elem.html()).toContain('(boe)');
});
});
});
The console log output "called" is never occurring and obviously the elem in my test spec is never updating.
What am I doing wrong??
Turns out that I wasn't including the directive in my karma.config file :S. Adding it in resolved all of my issues.
You can try out two things.
First, instead of using just a string tpl, try angular.element().
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
Second, place the tpl in the beforeEach block. So the result should look like this:
beforeEach(inject(function ($rootScope, $compile) {
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));
I am using a service to change some of scope A's variables. When I try to $watch for changes on those variables nothing happens.
The basic setup is shown below. I would like to use $watch in my own custom directive that I add to the element. But if that is impossible I would at least like to be able to use $watch from inside the controller.
I made a plunkr here. As you can see $scope.someVar changes but $watch is never fired on either the controller or the directive.
app.factory("changerService", function() {
var $scope;
function change(to) {
$scope.someVar = to;
}
function setScope(scope) {
$scope = scope;
}
return {
Change: change,
SetScope: setScope
}
});
app.controller("bar", ["$scope", "changerService", function ($scope, changerService) {
$scope.someVar = true;
changerService.SetScope($scope);
$scope.showImg = function (val) {
changerService.Change(val);
$scope.state = $scope.someVar;
};
$scope.$watch($scope.someVar, function (newVal, oldVal) {
$scope.watchController = newVal ? newVal : "undefined";
});
}]);
app.directive("myDirective", function () {
return {
link: function (scope, element, attrs) {
scope.$watch(scope.someVar, function (newVal, oldVal) {
scope.watchDirective = newVal ? newVal : "undefined";
});
}
}
});
After examining your code i noticed that your watch expression is an object but it must be a string.
Example:
app.controller("bar", ["$scope", "changerService", function ($scope, changerService) {
$scope.someVar = true;
changerService.SetScope($scope);
$scope.showImg = function (val) {
changerService.Change(val);
$scope.state = $scope.someVar;
};
$scope.$watch("someVar", function (newVal, oldVal) {
$scope.watchController = newVal ? newVal : "undefined";
});
}]);
app.directive("myDirective", function () {
return {
link: function (scope, element, attrs) {
scope.$watch("someVar", function (newVal, oldVal) {
scope.watchDirective = newVal ? newVal : "undefined";
});
}
}
});
I'm writing an angular directive. Here is the code:
'use strict';
app.directive('mcategory', function (MainCategory, $rootScope) {
return {
restrict: 'E',
replace: true,
template: '<select data-ng-model="selectedMainCategory" data-ng-options="mainCategory.mainCategoryId as mainCategory.mainCategoryName ' +
'for mainCategory in mainCategories" data-ng-change="mainCategoryChanged()"></select>',
link: function(scope, element, attr, controller) {
var elm = angular.element(element);
elm.attr('id', attr['id']);
elm.attr('name', attr['name']);
elm.attr('class', attr['class']);
MainCategory.get().then(function (mainCategories) {
scope.mainCategories = mainCategories;
});
scope.selectedMainCategory = false;
scope.mainCategoryChanged = function () {
if (!scope.selectedMainCategory) {
return;
}
$rootScope.$broadcast("mainCategoryChanged", { mainCategory: scope.selectedMainCategory });
};
}
};
})
MainCategory is a service and it works ok.
The problem is that selectedMainCategory is always undefined and mainCategoryChanged() event is not triggered when user selects another category in the select element. I think I have made a silly mistake but it is more than 2 hours that I can't solve the problem. Any help is appreciated in advance.
UPDATE
Here is the service:
'use strict';
app.factory('MainCategory', function ($http, $q) {
return {
get: function() {
var deferred = $q.defer();
$http.get('/MainCategory/GetMainCategories').success(deferred.resolve).error(deferred.reject );
return deferred.promise;
}
};
})
When I '/MainCategory/GetMainCategories' url in the browser I get all the categories in the correct json format.