Question

例如，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时，属性已设置，但它没有做任何事情。如果我将更改移动到链接功能，也会发生同样的事情。直接在视图中设置typeahead属性按预期工作：

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

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

类似的问题被问到here（关于在编译步骤中动态添加ng-click行为），但从未直接回答。

Answer 1

编译后，AngularJS仅为所有子元素调用$compile。元素本身不会自动重新编译，因此在此阶段添加指令将不起作用。在您的情况下，我认为您可以将它从编译函数更改为链接函数（因此您获得scope参数），并自己调用$compile(element)(scope)。

请参阅此Fiddle，其中我有一个添加style="color: red"的指令，以及另一个“动态”添加该指令的指令。它不起作用，除非我之后致电$compile。

HTH！

angular.js：使用指令将另一个指令作为属性插入

1 个答案: