当前位置: 首页 > 面试题库 >

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

施华奥
2023-03-14
问题内容

给定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,使其工作使用共享范围。


问题答案:

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

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

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

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

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

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

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

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



 类似资料:
  • 因此,我希望可以使用优先级来确保我的指令首先运行,并最终创建一个隔离范围,当运行时,它重用隔离范围,而不是创建一个原型上从父范围继承的范围。文档声明该指令在优先级下运行。尚不清楚是高优先级还是低优先级。当我在指令中使用优先级时,没有什么不同,所以我尝试了。但这使情况变得更糟:我的双向绑定变成,并且我的指令不显示任何内容。 我创造了一个小提琴来显示我的问题。我已经注释掉了指令中的设置。我有一个nam

  • 问题内容: 我正在寻找一些指南,可以用来帮助确定编写新指令时要使用的范围类型。理想情况下,我想要类似于流程图的内容,该流程将引导我解决一系列问题并弹出正确的答案- 没有新的新作用域,新的子作用域或新的孤立作用域-但这可能要求太多。这是我目前微不足道的准则集: 如果将使用指令的元素使用ng-model,请不要使用隔离范围。 如果指令不修改任何范围/模型属性,请不要创建新的范围 如果伪指令封装了一组D

  • 问题内容: 我试图做一个简单的指令来显示名称并允许对其进行更改。当我在名称页上放置多个指令时,它们似乎都共享name属性。我究竟做错了什么? 问题答案: 如前面的答案中所述,AngularJS指令的默认行为是共享它们所包含的范围。此行为通过指令定义对象中的参数进行更改。 您可以在AngularJS文档的此部分中查看scope参数的文档:http : //docs.angularjs.org/api

  • 问题内容: 我试图在我的指令中使用隔离范围放置一些默认值。基本上,绑定指令后,我需要使用scope对象进行一些DOM操作。下面是我的代码: 控制器: 服务: 指示: 自定义指令元素: 现在,问题是,当尝试在指令内部的默认方法中访问隔离范围时,我在获取数据并将其绑定到DOM的同时获得了未定义的值。如何访问广播侦听器中的隔离作用域并修改指令模板HTML?还有另一个处理这个的麻烦吗? 问题答案: 问题是

  • 如果将使用指令的元素使用ng-model 请不要使用独立的作用域(请参见可以使用ng-model与独立的作用域吗?和 为什么格式化程序不能与独立作用域一起工作? 如果指令没有修改任何作用域/模型属性,则不要创建新的作用域 如果指令封装了一组DOM元素(文档中说“一个复杂的DOM结构”),并且该指令将作为一个元素使用,或者在同一元素上没有其他指令,那么隔离作用域似乎可以很好地工作。 我知道,在一个元

  • 问题内容: 使用隔离范围时,伪指令的模板似乎无法访问控制器(’Ctrl’)$ rootScope变量,但是该变量确实出现在伪指令的控制器中。我了解为什么控制器(’Ctrl’)$ scope变量在隔离范围中不可见。 HTML: JavaScript: JSFiddle 可以在没有隔离作用域的情况下访问变量-如注释隔离作用域行所示: 问题答案: 您可以使用以下方法尝试 工作守则 html javasc