带有默认选项的 Angular指令是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

我刚刚从angularjs开始,并且正在将一些旧的JQuery插件转换成Jquery指令。我想为我的(元素)指令定义一组默认选项,它可以通过在属性中指定选项值来被覆盖。

首先,所有默认选项都在常量对象中定义:

.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';
      }
    }
  });

扫码关注云+社区