Question

我有一个现有的指令，我不想触摸它，使用方式如下：

<div other-directive value="xyz"></div>

问题是，该指令需要很多参数，我不想每次都写它们。所以我的想法是添加另一个指令，该指令预先设置这些参数。

<div my-directive other-directive></div>

我的覆盖机制如下所示：

angular.module('myApp')
  .directive("otherDirective", function(){
    return {
        restrict: "EA",
        template: '<i>{{value}}</i>',
        scope: {
            value: "=value"
        }
    };
  })

  // overwrite "value" parameter
  .directive("myDirective", function(){
    return {
        priority: 1000,
        restrict: "A",
        link: function(scope, element, attributes) {
          attributes.value = "Hello";
          attributes.$set('value', 'Hello');
        }
    };
  });

第二个指令似乎无法更改第一个指令的参数。请参阅我的Plunker：http://plnkr.co/edit/HutmraGNm9U1RKl5OD2S?p=preview

Answer 1

由于指令生命周期，上面的代码不起作用。在指令函数中link是最后执行的事情，此时已经编译了other-directive。相反，它应该是

compile: function(element, attributes) {
  attributes.value = "Hello";
  attributes.$set('value', 'Hello');
}

顺便说一句，=绑定将导致空值，因为范围上没有Hello属性。它应该是@。

然而，这是一个黑客。这样做的惯用方法是用另一个指令包装other-directive并在模板中提供所需的属性。

Angular Directive用于覆盖另一个指令的参数

1 个答案: