我只是从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
参数。
发布于 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; }
},
...
}
});
发布于 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';
}
}
});
https://stackoverflow.com/questions/18784520
复制相似问题