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

问题描述

给定一个带有 transclude 和一个独立作用域的指令 (container1)，当指令被链接时，我有这些作用域:

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

我期望:

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.

这给我带来了一个问题，因为如果嵌入的内容包含另一个具有独立作用域的指令 (component1)，我会得到:

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

我想使用这样的指令:

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

但这不起作用，在 component1 中，$scope.data 是 undefined 因为 objectExposedInContainer1 不是在正确的范围内.

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

我有两个问题:

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

• 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.

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

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.

推荐答案

如果指令具有独立作用域，为什么 ng-transclude 的作用域不是其指令作用域的子级?

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 designed to allow directives to work with arbitrary content, and isolated scopes are designed to allow directives to encapsulate their data.

如果 ng-transclude 没有保留这样的作用域，则您要转置的任何任意内容都需要知道指令的实现细节(即它需要知道在您创建的隔离作用域).

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.

如果容器指令应该将内容注入子级的作用域(例如 ng-repeat)，那么您不应该使用隔离的作用域.

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.

angular 文档对行为应该是什么非常清楚:

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

在典型的设置中，小部件创建了一个隔离范围，但是transclusion 不是一个孩子，而是隔离范围的兄弟.这个使小部件可以拥有私有状态，并且要绑定到父(隔离前)范围的嵌入."

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