AngularJS:指令范围继承



前言

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

<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"

默认情况下,我的子指令无法访问此指令。 为什么?(这假设父级中的"scope: true",子项中没有范围声明,并且子项通过"require: 'my-parent-directive'"要求父级(

示例代码笔:

指令包装

在控制器
中指令包装在指令中

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

我正在查看代码笔上的"指令包装在指令旧中"。 我认为这是您要修复的,但我不确定,因为您的代码笔与您问题中的示例不同(这不是批评,只是澄清一下,以防我走错了路!

但是,如果我是对的(并且我指的是代码笔上的"旧指令包装的指令",用于此答案的其余部分(:

您已经声明了 myWrapper 中要继承的作用域("scope: true"(,因此您在 myWrapper 中添加的作用域的任何属性(例如"$scope.passdown = $attrs.passdown;"(都只对 myWrapper 可见。

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

一些背景:

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

没有范围声明意味着共享范围 - 共享此范围的所有组件也可以看到对范围所做的任何属性/更改(对可变对象(。 往往最终会得到紧密耦合的组件,这些组件变得非常难以维护。

"

scope: true "表示继承的作用域,对作用域所做的任何添加将仅对固有作用域(即"子项"(可见。 对父级中可变属性的更改将对共享此范围的所有其他组件可见。

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

我希望这个答案不会太漫无边际,它可以帮助您解决问题。

最新更新