Angularjs 对父范围数据进行计算的嵌套角度指令

我有两个指令，一个是来自父级的计算的“奇特显示”——它们是嵌套的，因为有时子级是子级，有时是独立的

<parent>
    <reuse data="{values: {one:parentobject.data.one, two:parentobject.data.two}}" />
    <label>{{parenobject.data.one}}</label><label>{{parentobject.data.two}}</label>
</parent>

<reuse>
   <label>{{Calculation}}</label>
</reuse>

---

在初始加载时一切正常-但是当父指令范围更新时，我的“child”指令没有更新。父作用域及其显示中的所有值都在更新，但子作用域未更新。

您的代码有几个问题：

1） 由于子指令（

reuse

）定义了隔离作用域，因此它无法访问父作用域中未显式传递给该指令的所有值（如parentoneobject）

2） 指令不是单例，指令的第二个用途是打印计算结果，没有收到任何参数，也不知道数据是什么

3） 除非设置转换，否则指令中的内联HTML不起作用

上面的plunker演示了这个问题。请注意，从子对象引用父对象的标签不会随着父对象的更改而填充，只有那些

ng model

绑定到隔离范围的标签才会被修改。另外，请注意，这两个指令在作用域和DOM元素上都是完全不同的

现在，考虑到这一点，让我们谈谈如何使其工作，并假设如下：

1） 内部指令的html可能会有所不同，因此无法硬编码到模板 2） 计算结果需要在不同的位置以不同的范围显示

在这种情况下要做的第一件事是添加。指令的

transclude:true

标志。这将告诉您的指令放入任何嵌套的HTML。这为您提供了两个选项。第一种方法是使用模板上的

ng transclude

属性在需要的位置进行插值，例如：

模板：“

这种方法的问题是，产生的

范围

将是上层

范围

的子

范围

，而不是隔离范围，从而使您无法访问

数据

和

计算

第二种方法是使用传递给link函数的TRANCLUDE函数：

link: function(scope, elem, attrs, controller, transcludeFn){

这样做的好处是，您可以根据需要按摩DOM，然后自己插入

transcludeFn(scope, function(clone, outerScope){
  elem.append(compile(clone)(scope));
});

请注意，

clone

是原始DOM的副本，例如

</br><label>In child: {{data.values.one}}</label>
</br><label>In child: {{data.values.two}}</label>

在子项中：{{data.values.one}

在子项中：{{data.values.two}

这将编译指令的隔离

范围

中的元素，而不是父级的

范围

，然后再将它们附加到指令的DOM中

最后，问题是如何在不同的作用域之间共享这些数据。请记住，在Angular中，服务是跨所有作用域共享的单例。因此，我们创建了一个服务来执行计算，通过引用在指令的作用域中绑定到计算对象（以避免观察值和重新蚀刻），瞧

此plunker演示了如何将解决方案结合在一起：

</br><label>In child: {{data.values.one}}</label>
</br><label>In child: {{data.values.two}}</label>