AngularJS : directive scope inheritance

Question

前言

当我在 Controller 下声明指令时，例如

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

该指令默认继承该 Controller 的范围。这意味着如果 Controller 定义了

$scope.Heaven = "Free Beer"

然后我可以通过以下方式访问指令模板中的内容

{{ Heaven }}

问题

当在另一个指令中声明一个指令时，为什么子指令不像放置在 Controller 中那样继承作用域？

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

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

$scope.Heaven = "Free Beer"

默认情况下，我的子指令无权访问此指令。这是为什么？(这假设父级中为“scope: true”，子级中没有范围声明，并且子级通过“require: 'my-parent-directive' 需要父级)

代码笔示例:

Directive wrapped in controller
Directive wrapped in directive

给出答案后问题被修改 - 以下是为了保留引用
Directive wrapped in directive old

Answer 1

我正在 codepen 上查看“Directive wrapped in directive old ”。我认为这是您想要解决的问题，但我不确定，因为您的代码笔与您问题中的示例不同(这不是批评，只是澄清，以防我走错了路!)

但是，如果我是正确的(并且我指的是 codepen 上的“Directive wrapped in directive old”作为本答案的其余部分):

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

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

一些背景:

对“子” Controller /指令中的不可变类型的更改将创建属性的副本，并且这些更改将永远不会在任何其他作用域中看到。

没有作用域声明意味着共享作用域 - 共享此作用域的所有组件也可以看到在该作用域上所做的任何属性/更改(对可变对象)。往往会导致紧密耦合的组件变得非常难以维护。

“scope: true”表示继承范围，并且对该范围所做的任何添加仅对继承范围(即“子”)可见。父级中可变属性的更改对于共享此范围的所有其他组件都是可见的。

“scope: {...}”创建一个隔离的范围，并提供一种安全的方法来向父级公开属性并让子级修改这些属性。此实现需要更多工作，但您最终会得到更易于理解、维护和共享的代码。

我希望这个答案不会太杂乱，它可以帮助您解决问题。