一尘不染

为什么ng-transclude的作用域不是其指令的作用域的子级-如果该指令具有隔离的作用域?

angularjs

给定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.dataundefined因为objectExposedInContainer1不上合适的范围。

我有两个问题:

  • ng-transclude如果指令具有隔离的作用域,为什么作用域不是其指令作用域的子级?这是一个错误吗?
  • 如果不是错误,那么容器指令如何将数据传递给它的内容,如果不像我尝试的那样设置属性的话。

这是一个无法使用的示例:http :
//plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview。由于Plunker是使用Anguar构建的,因此很难使用Batarang进行调试。我建议在本地下载代码。注释掉line 10app.js,使其工作使用共享范围。


阅读 275

收藏
2020-07-04

共1个答案

一尘不染

如果ng-transclude的作用域具有隔离范围,为什么它的作用域不是其指令的作用域的子级?

ng-transclude 设计为允许指令使用任意内容,而隔离范围设计为允许指令封装其数据。

如果ng- transclude没有保留这样的范围,那么您要包含的任何任意内容都需要知道指令的实现细节(即,它需要知道在您创建的隔离范围中可以使用的内容)。

如果不是错误,那么容器指令如何将数据传递给它的内容,如果不像我尝试的那样设置属性的话。

如果容器指令和包含指令是耦合的(即您同时编写了这两个指令,并且需要它们共同起作用),则它们应该通过共享控制器进行通信。

如果应该使用容器指令将内容注入子级作用域(例如ng-repeat),则不应使用隔离的作用域。


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

“在典型的设置中,小部件会创建一个隔离范围,但是包含的内容不是孩子,而是隔离范围的同级。这使得小部件可以具有私有状态,并且可以将包含项绑定到父级(预先隔离)范围。”

2020-07-04