angularJS 可以管理多个嵌入包含吗？答案

【问题标题】：Can angularJS manage multiple transclusions inclusion?angularJS 可以管理多个嵌入包含吗？
【发布时间】：2014-07-16 16:44:21
【问题描述】：

我正在尝试进行传递性嵌入，或称其为“directive inception”。

我做了这个例子来说明我想要做什么：

http://plnkr.co/edit/0hFFHknDps2krtK1D9ud?p=preview

指令“first”将指令“second”包装在其模板中，并且它们两者都使用了嵌入。我想做的是将控制器中的值绑定到作为“first”指令的子元素的 html。所以我希望我的示例显示：

<h1>Chained transclusions test</h1>
<div>
  <h2>First directive</h2>
  <div>
    <h2>Second directive</h2>
    <div>Controller hello</div>
   </div>
</div>

显然这不是我得到的。我尝试使用开发人员工具分析范围，结果范围树让我感到惊讶：

the result trees

我认为在指令中使用 transclude 功能时 angularJS 会创建一个新范围。并且这个范围将是我的指令隔离范围的非隔离兄弟。但是我看不到我的第一个指令范围的任何兄弟（尽管它使用了 transclude）。另外，我的“第一个”指令的每个孩子都有一个与控制器范围隔离的范围，因为“第一个”指令范围是一个独立的范围。

我不明白这里的行为。

在 angularJS 中是否完全禁止嵌入包含？是否可以创建一个带有嵌入的指令，它包装另一个使用嵌入的指令？

在我看来，这就是 Web 组件背后的全部力量，事实上，嵌入或任何其他特殊特性应该被视为“实现细节”，并且组件应该能够使用隐藏自己实现的其他指令详情。

【问题讨论】：

我的回答对您解决问题有帮助吗？如果没有，请提供 cmets 或通过编辑更新此问题。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

无需深入了解 scope creation when using isolate scope with transclusion... 的详细信息，可以嵌套嵌入，但在您的示例中，您需要使 scope.controllerMsg 可用于第一个指令的隔离范围：

JS：

app.directive('first', function(){
    return {
        ...
        scope: { controllerMsg: '=text'},
        ...
    }
});

HTML：

<first text="controllerMsg">
    {{controllerMsg}}
</first>

Demo

【讨论】：