我只是从angularjs开始,并且正在努力将一些旧的JQuery插件转换为Angular指令。我想为我的(元素)指令定义一组默认选项,可以通过在属性中指定选项值来覆盖这些默认选项。
我一直在寻找其他人这样做的方式,并且在angular-ui库中ui.bootstrap.pagination似乎做了类似的事情。
首先,所有默认选项都在一个常量对象中定义:
.constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... })
然后,将getAttributeValue实用程序功能附加到指令控制器:
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以这种方式定义实用程序功能(例如和分析选项)是正常的吗?我有兴趣找出人们对于这项共同任务有哪些不同的策略。
另外,作为奖励,我不清楚为什么interpolate需要该参数。
interpolate
您可以使用compile函数-如果未设置属性,则读取属性-用默认值填充属性。
compile
.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; } }, ... } });