angularjs在嵌套指令中继承范围

发布时间：2020-12-17 17:37:59 所属栏目：安全来源：网络整理

导读：示例： http://jsfiddle.net/avowkind/PS8UT/ 我想要一个嵌套的子指令从其包装父指令获取其数据(如果存在),否则从外部控制器获取. div ng-controller="MyCtrl" parent index="1" child/child /parent parent index="2" child/child /parent h1No Parent/h1 c

示例： http://jsfiddle.net/avowkind/PS8UT/

我想要一个嵌套的子指令从其包装父指令获取其数据(如果存在),否则从外部控制器获取.

<div ng-controller="MyCtrl">
    <parent index="1">
        <child></child>
    </parent>
    <parent index="2">
        <child></child>
    </parent>
     <h1>No Parent</h1>
    <child></child>
</div>
<hr>

期望的输出

Parent 1
  Child of parent 1
Parent 2
  Child of parent 2
No Parent
  Child of parent 0

目前我的子对象只看到外部控制器值：

实际输出

Parent 1
  Child of parent 0
Parent 2
  Child of parent 0
No Parent
  Child of parent 0

这是简单的版本;实际上,外部指令从嵌套子项格式化的服务器获取数据,因此传达的是复杂对象而不是简单字符串.
此外,子代是一个可视化,可以处理不同的数据集,因此外部父指令并不总是相同的类型.

更一般地说,我试图获得的模式是使用单独的指令来填充模型并查看它.所以更实际的用法是

<temperature-for city="Auckland">
   <plot/>
   <analysis/>
</temperature-for>

<humidity-for city="Hamilton">
   <plot/>
   <analysis/>
</temperature-for>


<test-data>
   <plot/>
</test-data>

解决方法

我个人使用的另一种方法是将绘图和分析指令定义为隔离范围,然后双向绑定所需的输入.

这样,该指令就是完全独立的组件,具有明确的定义接口.我亲自制作了这样的策划指令：

<plot data="countries['Auckland'].plot.data" options="countries['Auckland'].plot.options" legend="external" zoom="xy"></plot>

Scope would look like:
scope: {
    data: '=',options: '=',zoom: '@?',// '?' indicates optional
    legend: '@?',}

这样就不会混淆该组件需要哪些数据才能工作,您可以在指令中编写文档以获取所需的输入属性.

总而言之,这是一种对AngularJS中的大部分用例非常有效的模式,即只要有可重用性的情况.

编辑：只是想补充一点：看看你的HTML,绝对没有迹象表明这些指令的用途,它们可能依赖于任何东西(例如,他们从服务获得所有数据吗？还是取决于父作用域？如果是这样的话,什么范围？)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!