为什么NG-transclude的范围不其指令的范围，一个孩子 - 如果指令有一个孤立的范围是什么？ [英] Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

问题描述

给定一个指令（ container1 ）与transclude和隔离范围，当该指令被链接然后我有这些范围

 范围004＆LT;  - 身体的范围
    范围005＆LT;  - 指令container1范围
    范围006＆LT;  - 在NG-transclude范围
 

我的预期：

 范围004＆LT;  - 身体的范围
    范围005＆LT;  - 该指令范围
         范围006＆LT;  - 在NG-transclude范围
 

如果同样的指令有一个的共享范围的代替的隔离范围的，我得到预期的结果。

这使我一个问题，因为，如果transcluded内容包含另一个指令（ COMPONENT1 ）与孤立的范围，我得到：

 范围004＆LT;  - 身体的范围
    范围005＆LT;  - 该指令范围
    范围006＆LT;  - 在NG-transclude范围
          范围007＆LT;  - 指令COMPONENT1范围
 

我想使用的指令是这样的：

 ＆LT; container1＆GT;
   ＆LT; COMPONENT1数据=objectExposedInContainer1/＆GT;
＆LT; / container1＆GT;
 

但是，这并不工作，在 COMPONENT1 ， $ scope.data 是未定义，因为 objectExposedInContainer1 是不是正确的范围。

我有两个问题：

• 为什么 NG-transclude 的范围不其指令的范围，一个孩子如果指令有一个孤立的范围是什么？这是一个错误？


• 如果它不是一个错误，怎么能一个容器指令将数据传递到它的内容，如果没有被像我试图设置属性。

下面是一个简单的地方它不工作：<一href=\"http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=$p$pview\">http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=$p$pview.由于Plunker与Anguar建成，这是很难用Batarang调试。我建议在本地下载code。注释掉 10号线 app.js 中，使其工作使用共享范围。

解决方案

  

为什么NG-transclude的范围不其指令的范围，一个孩子如果指令有一个孤立的范围是什么？

NG-transclude 设计，让指令与任意内容工作，并隔离示波器被设计为允许指令封装他们的数据。

如果 NG-transclude 没preserve范围这样，那你就transcluding需要知道你的指令实施细则（任意内容也就是说，它需要知道什么是可在您创建的隔离范围内）。

  

如果这不是一个错误，怎么能一个容器指令将数据传递到它的内容，如果没有被像我试图设置属性。

如果容器指令和包含指令耦合 - 即你写他们与需要他们共同行动 - 那么他们就应该通过共享控制器通讯

如果容器指令应该将内容插入孩子的范围（例如NG-重复），那么你不应该使用一个孤立的范围。

---

角文档什么的行为应该是很清楚的：

  

的在典型的设置窗口小部件创建一个分离的范围，但
  transclusion是不是一个孩子，而是分离范围的同级。这个
  它使小部件有私人状态，
  transclusion要绑定到父（$ P $对 - 分离株）范围。的

Given a directive (container1) with transclude and an isolated scope, when the directive is linked then I have these scopes:

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

I expected:

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

If the same directive has a shared scope instead of an isolated scope, I get the expected result.

This causes me a problem because, if the transcluded content contains another directive (component1) with an isolated scope, I get:

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

I want to use the directives like this:

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

But that does not work, inside component1, $scope.data is undefined because objectExposedInContainer1 is not on the right scope.

I have two questions:

• Why ng-transclude's scope is not a child of its directive's scope if the directive has an isolated scope? Is this a bug?
• If it's not a bug, how can a container directive pass data to it's content, if not by setting attributes like I tried.

Here is a sample where it does not work: http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview. Because Plunker is built with Anguar, it's hard to debug with Batarang. I recommend downloading the code locally. Comment out line 10 of app.js to make it work using a shared scope.

解决方案

Why ng-transclude's scope is not a child of its directive's scope if the directive has an isolated scope?

ng-transclude designed to allow directives to work with arbitrary content, and isolated scopes are designed to allow directives to encapsulate their data.

If ng-transclude didn't preserve scopes like that, any arbitrary content that you're transcluding would need to know the implementation details of your directive (i.e. it would need to know what's available on the isolated scope you created).

If it's not a bug, how can a container directive pass data to it's content, if not by setting attributes like I tried.

If the container directive and contained directives are coupled - i.e. you wrote both of them and need them to act together - then they should communicate via a shared controller.

If the container directive is supposed to inject content into the scope of the children (e.g. ng-repeat), then you shouldn't be using an isolated scope.

---

The angular documentation is quite clear on what the behaviour is supposed to be:

"In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope."

这篇关于为什么NG-transclude的范围不其指令的范围，一个孩子 - 如果指令有一个孤立的范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！