transclude的范围不其指令的范围

transclude的范围不其指令的范围

本文介绍了为什么NG-transclude的范围不其指令的范围,一个孩子 - 如果指令有一个孤立的范围是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

 范围004<  - 身体的范围
    范围005< - 指令container1范围
    范围006< - 在NG-transclude范围

我的预期:

 范围004<  - 身体的范围
    范围005< - 该指令范围
         范围006< - 在NG-transclude范围

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

这使我一个问题,因为,如果transcluded内容包含另一个指令( COMPONENT1 )与孤立的范围,我得到:

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

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

 < container1>
   < COMPONENT1数据=objectExposedInContainer1/>
< / container1>

但是,这并不工作,在 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 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 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:

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

07-26 04:27