AngularJS:指令范围继承

Question

前言

当我在控制器下声明指令时,例如

<div ng-controller="MyController">
  <my-directive></my-directive>
</div>

该指令默认继承该控制器的作用域.这意味着如果控制器定义

$scope.Heaven = "Free Beer"

然后我可以在指令的模板中访问它

{{ Heaven }}

题

在另一个指令中声明一个指令时,为什么子节点不会像放在控制器中那样继承范围？

<my-parent-directive>
  <my-child-directive>
  </my-child-directive>
</my-parent-directive>

简而言之,如果我为my-parent-directive声明一个控制器函数并在其中写入:

$scope.Heaven = "Free Beer"

默认情况下,我的child指令无法访问此指令.这是为什么？(这假定父级中的"范围:true",子级中没有范围声明,以及通过"require:'my-parent-directive'要求父级的子级)

示例代码:

包含在控制器
指令中的指令包含在指令中

在给出答案后修改了问题 - 以下是保留指令旧的包含的参考
指令

Answer 1

我在codepen上看" 指令包裹在指令中 ".我认为这是你要解决的问题,但是我不确定,因为你的codepen与你问题中的例子有所不同(这不是批评,只是澄清以防我为你走错路线!)

但是,如果我是正确的(我在代码的其余部分引用了"在指令中包含的指令 "):

您已将myWrapper中的范围声明为继承(" scope: true"),因此您在myWrapper中添加到范围的任何属性(例如" $scope.passdown = $attrs.passdown;")将仅对myWrapper可见.

您可以scope: true从myWrapper中删除" "以在所有内容之间共享范围(不是一个很好的结构,但它会起作用),如果我理解正确的话,您将解决您的直接问题.或者,您可以将" passdown"属性移动到"父"控制器" $scope.abc = {passdown: ''};" 上的可变对象.然后修改myWrapper中的值:" $scope.abc.passdown = $attrs.passdown;"并abc.passdown在插值表达式中将其作为" " 访问.

一点背景:

对"child"控制器/指令中的不可变类型的更改将生成属性的副本,并且永远不会在任何其他范围上看到这些更改.

没有范围声明意味着共享范围 - 共享此范围的所有组件也可以看到在范围上进行的任何属性/更改(对于mutable).趋向于最终得到非常难以维护的紧密耦合的组件.

" scope: true"是指范围作出继承范围和任何增加只会给inhert可见荷兰国际集团范围(即"子").对于共享此范围的所有其他组件,父级中可变属性的更改将可见.

"scope:{...}"创建一个独立的范围,并提供一种向父项公开属性的安全方法,并让子项修改这些属性.这种实现工作更多,但最终会得到更易于理解,维护和共享的代码.

我希望这个答案不是太漫无边靠,它可以帮助你解决问题.