Javascript 带有默认选项的AngularJS指令
我刚开始学习angularjs,正在将一些旧的JQuery插件转换为Angular指令。我想为我的(element)指令定义一组默认选项,可以通过在属性中指定选项值来覆盖这些选项 我环顾了一下其他人做这件事的方式,在图书馆里似乎也做了类似的事情 首先,在常量对象中定义所有默认选项:Javascript 带有默认选项的AngularJS指令,javascript,angularjs,angularjs-directive,options,default-value,Javascript,Angularjs,Angularjs Directive,Options,Default Value,我刚开始学习angularjs,正在将一些旧的JQuery插件转换为Angular指令。我想为我的(element)指令定义一组默认选项,可以通过在属性中指定选项值来覆盖这些选项 我环顾了一下其他人做这件事的方式,在图书馆里似乎也做了类似的事情 首先,在常量对象中定义所有默认选项: .constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... }) 然后将getAttributeValue实用
.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,并且发现在设置默认属性值时,它非常有效 只是提醒一下:
保存原始DOM属性值,这些值总是attrs
或字符串未定义的
保存(除其他外)根据提供的隔离作用域规范解析的DOM属性值(scope
/=
谢谢!关于为什么
会以一种更复杂的方式进行操作,有什么想法吗?我想如果使用编译函数,以后所做的任何属性更改都不会反映出来,但这似乎不是真的,因为在这一阶段只设置了默认值。我想一定会有一些折衷此处创建。@KenChatfield inui.bootstrap.pagination
您无法读取属性,属性应该被插值以获取值(其中包含表达式)。但是,如果您只想检查属性是否为空,它将对您没有任何折衷(在插值属性包含带表达式的字符串之前)。太棒了!非常感谢您的清晰解释。对于未来的读者,尽管与原始问题相切,但对于“插值”参数在compile
示例中的作用的解释,我发现了这个非常有用的示例:非常感谢您的解决方案。请注意,如果您需要ui.bootstrap.pagination
opti在上,您仍然可以在链接
选项中返回函数。请记住,属性需要从模板中传递的值。如果要传递数组f.e.,它应该是compile
而不是attributes.foo='[“一”、“二”、“三”]'
attributes.foo=[“一”、“二”、“三”]
自1.1.xi起可用。如果您的属性可以接受=?
或true
作为值,您(我认为)会希望使用例如false
。注意:它仅适用于双向绑定,例如$scope.hasName=angular.isDefined($scope.hasName)?$scope.hasName:false;
,但不适用于单向绑定,=?
。也只能在模板中完成:模板:'hello{{{name | | \'defaultname\}'应该在控制器或@
函数中设置默认值吗?根据我的理解,在链接
期间分配应该避免链接
循环,不是吗?$scope.$apply()
.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: ... } });