为什么ng-transclude的范围不是其指令范围的子代 - 如果指令具有隔离范围？

Question

给定container1带有transclude 的指令()和一个隔离的范围,当指令链接时,我有这些范围:

Scope 004           <-- scope of the body
    Scope 005       <-- scope of directive container1
    Scope 006       <-- scope of the ng-transclude

我期望:

Scope 004            <-- scope of the body
    Scope 005        <-- scope of the directive
         Scope 006   <-- scope of the ng-transclude

如果同一指令具有共享范围而不是隔离范围,则会得到预期结果.

这导致了一个问题,因为如果被转换的内容包含另一个component1带有隔离范围的指令(),我得到:

Scope 004             <-- scope of the body
    Scope 005         <-- scope of the directive
    Scope 006         <-- scope of the ng-transclude
          Scope 007   <-- scope of directive component1

我想使用这样的指令:

<container1>
   <component1 data="objectExposedInContainer1"/>
</container1>

但是,这并不工作,里面component1,$scope.data是undefined因为objectExposedInContainer1不上合适的范围.

我有两个问题:

• ng-transclude如果指令具有孤立的范围,为什么范围不是其指令范围的子节点？这是一个错误吗？
• 如果它不是一个bug,容器指令如何通过设置我尝试过的属性来将数据传递给它的内容.

以下是不起作用的示例:http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2？p = preview.因为Plunker是用Anguar构建的,所以用Batarang很难调试.我建议在本地下载代码.注释掉line 10的app.js,使其工作使用共享范围.

Answer 1

如果指令具有隔离范围,为什么ng-transclude的范围不是其指令范围的子代？

ng-transclude 旨在允许指令使用任意内容,并且隔离范围旨在允许指令封装其数据.

如果ng-transclude没有保留这样的范围,那么您要转换的任何内容都需要知道指令的实现细节(即,它需要知道您创建的隔离范围上可用的内容).

如果它不是一个bug,容器指令如何通过设置我尝试过的属性来将数据传递给它的内容.

如果容器指令和包含的指令是耦合的 - 即你写了两个并且需要它们一起行动 - 那么它们应该通过共享控制器进行通信.

如果容器指令应该将内容注入子项的范围(例如ng-repeat),那么您不应该使用隔离的范围.

角度文档非常清楚行为应该是什么:

"在典型的设置中,窗口小部件创建了隔离范围,但是转换不是子项,而是隔离范围的兄弟.这使得窗口小部件可以具有私有状态,并且将转换绑定到父窗口(预先隔离)范围."

Answer 2

您可以手动转换子元素

link: function(scope, element, attrs, ctrl, transclude) {
    transclude(scope, function(clone, scope) {
        element.find('.transclude-placeholder').append(clone);
    });
}

Answer 3

最佳答案仅对Angular v1.2以下版本正确。

自Angular v1.3起，行为已更改，并且现在的行为与问题的“我期望的”部分所述完全相同，从而使该问题对于Angular v1.3 +已过时。

来源：https : //github.com/angular/angular.js/commit/fb0c77f0b66ed757a56af13f81b943419fdcbd7f