带有默认选项的AngularJS指令
带有默认选项的AngularJS指令
提问于 2013-09-13 18:51:13
我只是从angularjs开始，正在致力于将一些旧的JQuery插件转换成Angular指令。我想为我的(element)指令定义一组默认选项，可以通过在属性中指定选项值来覆盖这些选项。
我看了看其他人是如何做到这一点的，在angular-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和解析选项之类的实用函数是正常的吗？我很感兴趣的是，对于这个常见的任务，人们有什么不同的策略。
另外，作为奖励，我不清楚为什么需要interpolate参数。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-13 18:57:27
您可以使用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; }
},
...
}
});Stack Overflow用户
发布于 2013-12-21 01:20:46
对指令的作用域块中的属性使用=?标志。
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';
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18784520
复制相关文章
相似问题