共享必需的 ^parent 的指令是否共享 parent 的 $scope？

Question

我在两个

中都使用 require 时遇到问题

myDirectiveChild1 -- C1 myDirectiveChild2 -- C1

children的指令require: ^myDirectiveParent -- P

P 定义 $scope.myVar

但是C1和C2好像是over-writingparentP的$scope.myVar

的值

而不是每个人都有自己的副本。

这正常吗？

如何让 C1,C2 有自己的值？

Answer 1

定义指令时，您可以定义指令是创建 child 作用域 scope: true、创建隔离作用域：scope: { }，还是仅使用相同的外部作用域 (默认值）：scope: false.

当你的指令在作用域上定义值时，默认选项几乎总是错误的，因为你可能会不经意地覆盖外部作用域的属性（或者，如果你打算覆盖它，那么你的指令将与该范围紧密耦合）。

您的指令 c1 和 c2 似乎有 scope: false。相反，请考虑为它们创建一个 child 作用域。

.directive("c1", function(){
  return {
    scope: true, // creates a child scope for c1
    link: function(scope, element, attrs){
      scope.myVar = "foo"; // will not overwrite the parent's myVar
    }
  }
});

因此，每个人都会用自己的影子 parent 的 myVar：

<parent>
   <c1></c1>
   <c2></c2>
</parent>

请注意，将两个 child 指令放在同一个元素上将使它们共享一个范围，并且一个会覆盖另一个：

<div c1 c2></div>

另请注意，require 属性仅提供对 parent 控制器的引用。因此，parent 可以定义一个 API，通过这些指令 require 它可以调用操作。这与范围和范围继承无关。

阅读 Angular's directive guide 中有关创建指令的更多信息，其中对此类概念进行了更详细的描述。

共享必需的 ^parent 的指令是否共享 parent 的 $scope？

Do directives that share a required ^parent share parent's $scope?

scope

directive

require

angularjs