首页 文章

AngularJS：指令范围继承

提问于
浏览 次
4

前言

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

<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'要求父级的子级）

示例代码：

Directive wrapped in controller
Directive wrapped in directive

在给出答案后修改了问题 - 以下是保留参考
Directive wrapped in directive old

angularjs angularjs-directive angularjs-scope

1 回答

  • 5

    我在codepen上看“Directive wrapped in directive old” . 我认为这是你要解决的问题，但我不是批评，只是澄清以防我为你走错路线！）

    但是，如果我是正确的（我指的是代码中的“Directive wrapped in directive old”用于本答案的其余部分）：

    您已声明myWrapper中要继承的范围（“ scope: true "), therefore any properties that you add to the scope within myWrapper (such as " $scope.passdown = $attrs.passdown; ”）仅对myWrapper可见 .

    您可以在插值表达式中删除“ scope: true " from myWrapper to share the scope between everything (not a great structure to use, but it will work) and you will solve your immediate problem, if I have understood you correctly. Or you can move the " passdown " property to a mutable object on the " parent " controller " $scope.abc = {passdown: ''}; " for example. Then modify the value in myWrapper: " $scope.abc.passdown = $attrs.passdown; " and access it as " abc.passdown ” .

    a bit of background:

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

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

    “ scope: true ”表示继承范围，对范围所做的任何添加仅对inhert ing 范围（即"child"）可见 . 对于共享此范围的所有其他组件，父级中可变属性的更改将可见 .

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

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

    回复于

相关问题