How to set a default value in an AngularJS Directive Scope?
Solution 1
I think a better way to check that value is look for an undefined value like this:
controller: function($scope){
if (angular.isUndefined($scope.allowSomething))
$scope.allowSomething = true;
}
I had the same issue once and this worked for me. I think the best method is to use angular's methods for handling things.
Solution 2
This is how I have been doing it:
html:
<my-directive allow-something="false"></my-directive>
<my-directive></my-directive>
directive:
angular
.module('app')
.directive('myDirective', function() {
var defaults = {
allowSomething: true
};
return {
restrict: 'E',
templateUrl: '',
scope: {},
compile: function() {
return {
pre: function(scope, el, attrs) {
scope.allowSomething = attrs.allowSomething || defaults.allowSomething;
},
post: function(scope, el) {
// this is link
// scope.allowSomething = default or whatever you enter as the attribute "false"
}
};
}
};
}
The pre is fired before anything happens then the post is like the link function. This has allowed me to do dynamic things based on the attributes I set.
kob490
Updated on June 19, 2020Comments
-
kob490 about 4 years
In AngularJS, I have the following scenario where a directive can accept an optional boolean parameter which should default to true by default, whenever it is not specified.
Example:
<my-directive data-allow-something="false"> ... this works as expected as no default value should be set in this case ... </my-directive> <my-directive> ... but in this case i'd like allowSomething to equal true ... </my-directive>
I've tried the following approach, but for some reason the true value doesn't stick on allowSomething. making it a '=?' optional two way binding doesn't work neither as my passed value should be a concrete true/false and not a field reference.
angular.module('myApp').directive('myDirective') { ... controller: function($scope){ if (!$scope.allowSomething) $scope.allowSomething = true; }, .... scope: function(){ allowSomething: '@' } ... }
I'm sure there should be a simple way to achieve this, so what am i missing?
The solutions given at the following ticket: AngularJS directive with default options are not sufficient for my needs since the $compile function will prevent the link function from working. plus, the passed-in boolean value is not a reference type and i cannot give it a two-way binding.
-
kob490 almost 9 yearsthis will not work, as I'd like to keep the scope of the directive isolated, as it should be an independent reusable directive.
-
Daniel Kobe over 8 yearsalso if you do
if (!$scope.allowSomething) $scope.allowSomething = true;
it will set it true when you explicitly set it to false. -
Alisson Reinaldo Silva about 7 yearsI think this is cleaner than accepted answer, also I've seen some known plugins using this pattern with a
defaults
object containing default configurations.