angularjs – 为什么ng-transclude的范围不是它的指令范围的子 – 如果指令有一个孤立的范围?

给定一个指令(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是未定义的,因为objectExposedInContainer1不在正确的范围。

我有两个问题:

>为什么ng-transclude的范围不是它的指令范围的子元素,如果指令有一个孤立的范围?这是一个错误
>如果它不是一个错误,容器指令如何传递数据到它的内容,如果不是通过设置属性,如我试过。

这里是一个不工作的示例:http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview.因为Plunker是用Anguar构建的,所以很难用Batarang进行调试。我建议在本地下载代码。注释掉app.js的第10行,以使其使用共享作用域。

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

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

如果ng-transclude没有保留这样的范围,那么任何被转录的任何内容都需要知道指令的实现细节(即它需要知道你创建的孤立范围上的可用内容)。

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.

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

如果容器指令应该将内容注入到孩子的范围内(例如ng-repeat),那么你不应该使用一个孤立的范围。

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

“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.”

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...