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

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.我的实际用例比这更复杂.)

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

Answer 1

编译后,AngularJS只调用$compile所有子元素.元素本身不会自动重新编译,因此在此阶段添加指令将不起作用.在你的情况下,我认为你可以将它从编译函数改为链接函数(所以你得到一个scope参数),然后$compile(element)(scope)自己调用.

看到这个小提琴我有一个添加的指令,style="color: red"另一个指令"动态"添加该指令.它不起作用,除非我$compile事后打电话.

HTH!