Question

我正在尝试进行传递性转换，或称之为“指令启动”。

我做了这个例子来说明我想要做的事情：

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

指令“first”在其模板中包含指令“second”，其中两个使用transclusion。我想要做的是将控制器中的值绑定到作为“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

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

我不明白这里的行为。

angularJS中是否完全禁止转换包含？是否可以创建一个带有翻译的指令，它包含另一个使用翻译的指令？

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

Answer 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

angularJS可以管理多个转换包含吗？

1 个答案: