4

例如，UI Bootstrap有一个名为 'typeahead' 的指令，它建议字段的值。假设我想创建一个指令，我可以将其用作元素的属性，从而为该元素建议颜色。

这是一个失败的尝试......

指示：

angular.module('myApp')
  .directive('suggestcolors', function () {
    return {
      compile: function compile(element, attrs) {
        attrs.$set("typeahead", "color for color in ['red', 'blue', 'green']");
      }
    };
  });

看法：

<textarea ng-model="foo" suggestcolors></textarea>

当我检查 textarea 时，该属性已设置，但它没有做任何事情。如果我将更改对 attrs 移动到链接函数，也会发生同样的事情。直接在视图中设置 typeahead 属性按预期工作：

<textarea ng-model="foo" typeahead="color for color in ['red', 'blue', 'green']"></textarea>

（但出于 DRY 的原因，我希望能够动态插入此属性。我的实际用例比这更复杂。）

这里提出了一个类似的问题（关于在编译步骤中动态添加 ng-click 行为），但从未直接回答。

4

1 回答 1

6

编译后，AngularJS 只调用$compile所有的子元素。元素本身不会自动重新编译，所以在这个阶段添加指令不会有效果。就您而言，我认为您可以将其从编译函数更改为链接函数（这样您就可以得到一个scope参数），然后$compile(element)(scope)自己调用。

请参阅this Fiddle，其中我有一个添加指令，style="color: red"另一个指令“动态”添加该指令。它不起作用，除非我$compile事后打电话。

！

于 2013-08-15T08:35:16.280 回答