javascript - Angular .js : using a directive to insert another directive as an attribute

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>

当我检查文本区域时，已经设置了属性，但它什么也没做。如果我将对 attrs 的更改移动到链接函数，也会发生同样的事情。直接在 View 中设置 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。

喂!