使用指令作为属性时的包含

Question

我对 angular 将指令作为属性进行管理的方式遇到了问题。

我有一个使用嵌入的元素指令：

<xx-button>Button!</xx-button>

我有一个指令可以通过向其中添加一些其他指令来更改元素的内容：

<xx-button xx-modifying-directive>Button!</xx-button>

这将修改为：

<xx-button some-other-directives>
  <button>Button!</button>
</xx-button>

当我在 xx-modifying-directive 指令的链接函数中编译元素的内容时，出现以下错误：

Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element:

这个JSFiddle.

你可以更清楚的看到问题

阅读文档或 ngRepeat 的源代码我不知道如何解决该问题。

注意：我需要在 xx-modifying-directive 中编译我的元素，因为该指令添加了其他需要编译的指令（在我的实际情况中，我添加了像 hm-pan 这样的锤子处理程序）。

更新：

仔细观察，问题出在（ngTransclude 指令）[https://github.com/angular/angular.js/blob/2a156c2d7ec825ff184480de9aac4b0d7fbd5275/src/ng/directive/ngTransclude.js#L59] 没有传递给 transclude 函数。

仍然不知道为什么，因为它实际上有一个激活了嵌入的祖先 (xx-button)。

Answer 1

$transclude 函数必须提供给 $compile。它被传递给 link 函数。

link: function(scope, elem, attrs, $transclude) {
  [...]
  if ($transclude) { // It can be undefined if not content is provided
    $compile(element, $transclude)(scope);
  }
  [...]
}

如果您想更深入地了解嵌入业务，请关注此 link。

使用指令作为属性时的包含

Transclusion when using directive as attribute

angularjs

angular-directive