AngularJS directive with default options
I'm using AngularJS v1.5.10 and found the preLink
compile function to work rather well for setting default attribute values.
Just a reminder:
attrs
holds the raw DOM attribute values which are always eitherundefined
or strings.scope
holds (among other things) the DOM attribute values parsed according to the provided isolate scope specification (=
/<
/@
/ etc.).
Abridged snippet:
.directive('myCustomToggle', function () {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
transclude: true,
scope: {
ngModel: '=',
ngModelOptions: '<?',
ngTrueValue: '<?',
ngFalseValue: '<?',
},
link: {
pre: function preLink(scope, element, attrs, ctrl) {
// defaults for optional attributes
scope.ngTrueValue = attrs.ngTrueValue !== undefined
? scope.ngTrueValue
: true;
scope.ngFalseValue = attrs.ngFalseValue !== undefined
? scope.ngFalseValue
: false;
scope.ngModelOptions = attrs.ngModelOptions !== undefined
? scope.ngModelOptions
: {};
},
post: function postLink(scope, element, attrs, ctrl) {
...
function updateModel(disable) {
// flip model value
var newValue = disable
? scope.ngFalseValue
: scope.ngTrueValue;
// assign it to the view
ctrl.$setViewValue(newValue);
ctrl.$render();
}
...
},
template: ...
}
});
You can use compile
function - read attributes if they are not set - fill them with default values.
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
...
controller: 'PaginationController',
compile: function(element, attrs){
if (!attrs.attrOne) { attrs.attrOne = 'default value'; }
if (!attrs.attrTwo) { attrs.attrTwo = 42; }
},
...
}
});
Use the =?
flag for the property in the scope block of the directive.
angular.module('myApp',[])
.directive('myDirective', function(){
return {
template: 'hello {{name}}',
scope: {
// use the =? to denote the property as optional
name: '=?'
},
controller: function($scope){
// check if it was defined. If not - set a default
$scope.name = angular.isDefined($scope.name) ? $scope.name : 'default name';
}
}
});