带默认选项的Angular指令

我刚刚开始使用angularjs，并正在将一些旧的JQuery插件转换为Angular指令。 我想为我的（element）指令定义一组默认选项，可以通过在属性中指定选项值来覆盖它。

我已经查看了其他人做这件事的方式，在ui-ui库中， ui.bootstrap.pagination似乎做了类似的事情。

首先所有的默认选项都是在一个常量对象中定义的

.constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... }) 

然后，一个getAttributeValue实用程序函数被附加到指令控制器：

 this.getAttributeValue = function(attribute, defaultValue, interpolate) { return (angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue); }; 

最后，在链接函数中使用它来读取属性

 .directive('pagination', ['$parse', 'paginationConfig', function($parse, config) { ... controller: 'PaginationController', link: function(scope, element, attrs, paginationCtrl) { var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks); var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true); ... } }); 

这似乎是一个相当复杂的设置，以标准的东西来代替一组默认值。 还有其他方法可以做到这一点吗？ 或者是否总是以这种方式定义一个效用函数（如getAttributeValue和parsing选项是正常的？ 我有兴趣了解人们对于这个共同的任务有什么不同的策略。

另外，作为奖励，我不清楚为什么interpolate参数是必需的。

Answer 1

如果没有设置，可以使用compilefunction – 读取属性 – 填充默认值。

 .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; } }, ... } }); 

Answer 2

使用=? 该指令的范围块中的属性标志。

 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'; } } });