我只是从angularjs开始,并且正在努力将一些旧的JQuery插件转换为Angular指令。我想为我的(元素)指令定义一组默认选项,可以通过在属性中指定选项值来覆盖这些默认选项。
我一直在寻找其他人这样做的方式,并且在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
需要该参数。
您可以使用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; }
},
...
}
});
=?
在指令的作用域块中将标志用于属性。
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';
}
}
});
我使用的是AngularJS v1.5.10,发现preLink
编译功能可以很好地用于设置默认属性值。
只是提醒:
attrs
保存原始DOM属性值,该值始终为undefined
或字符串。scope
成立(除其他外)的DOM属性值解析按照所提供的分离范围规范(=
/<
/@
/等)。
简短摘要:
.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: ...
}
});
本文地址:http://javascript.askforanswer.com/daiyoumorenxuanxiangdeangularjszhiling.html
文章标签:angularjs , angularjs-directive , default-value , javascript , options
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:angularjs , angularjs-directive , default-value , javascript , options
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!