$scope 和 $rootscope 混淆

Question

我不明白为什么这个程序的输出不是

Global value is 4 

Child Instance of Function1 created :- 1

Child Instance of Function2 created :- 2

Child Instance of Function1 created :- 3

Child Instance of Function2 created :- 4

Plunker - http://plnkr.co/edit/HktvgxMM0g1WJG2oLjIN?p=preview

感谢您的帮助。

Answer 1

原因是因为您的第二个控制器在视图上引用$rootScope，而第一个控制器在视图上引用本地$scope。

由于第一个控制器设置了本地范围，因此它将是当时设置的内容。在你的情况下1 & 3。

但是，您的第二个控制器引用了相同的值（$rootScope 之一）。因此，在实例化时，每个第二个控制器当时都将值输出到控制台。但是，视图只会显示最新的 $rootScope 值（即 4）。

---

请记住，$rootScope 对于所有使用它的东西都是一样的。因此，如果两个位置将一个 rootScope 值加 1，那么该值最终将加 2。

当您在视图中使用{{Counter}} 时，也会发生这种情况。 Angular 会查找第一个找到的 Counter 值的范围层次结构。对于您的第二个控制器，它找不到具有Counter 值的本地$scope，因此它会检查下一个$rootScope，这是它找到引用的地方。

Answer 2

Scope 是controller 的一个实例

每次您在视图中声明 controller 时，它都会为自己创建 scope。

在Function1 中，您在$rooscope 中增加Counter，并在控制器范围的Counter 中分配。

$rootScope.Counter = (($rootScope.Counter || 0) + 1);
$scope.Counter = $rootScope.Counter;

如果父子变量同名，则子变量会被执行。

这就是为什么Counter 的视图值将是子范围Counter。

在Function2 中，您增加了rootScope 中的计数器，但没有使用本地范围，因此Counter 毫无疑问将是rootScope。

$rootScope.Counter = (($rootScope.Counter || 0) + 1);

所以模拟将是

Function1 : 

rootScope : 1
Scope : 1 // will print this 


Function2

rootScope : 2 // will print this



Function1 : 

rootScope : 3
Scope : 3 // will print this


Function2

rootScope : 4 // will print this

对于两个绑定，无论您使用rootScope 的Counter，它都会在Counter 中打印4，因为rootScope 中的当前值是4。

如果你想得到你想要的答案，你必须在Function2 的子作用域的计数器中赋值，比如Function1

这样

$rootScope.Counter = (($rootScope.Counter || 0) + 1);
$scope.Counter = $rootScope.Counter;
$scope.ControllerName = "Function2";

PLUNKR

Answer 3

正如之前的答案中提到的，$scope 在创建过程中被创建/注入到新控制器中（Function1 和 Function2 在您的情况下）。每个$scope 可能是$rootScope 的孙子或大孙子，正如$scope.$id 与$rootScope.$id 相比，您可以看出。

如果您希望$scope 成为更接近一代的子代或孙代，您可以使用$scope = $rootScope.$new() 创建一个$scope，但这不是很实用。如果您使用$rootScope.$new() 创建$scope，则可以保证您拥有与$rootScope 相同的Counter 值，但是这样获得的好处不多。

Answer 4

你可以这样理解 $rootScope 是最顶层的作用域，所有其他作用域（即 $scope）都在这个范围内。因此，如果您必须在范围之间传递值，那么您必须使用 $rootScope。

注意：function1 使用局部变量 Counter，其作用域在控制器内。 IE。每个控制器都有自己的范围。 function2 使用全局变量 Counter，因为没有定义全局变量。

在您的情况下（请记住角度支持双向绑定，因此每当全局值更改时，它会在所有位置更改），控制器按以下顺序调用 function1 -> function2 -> function1 -> function2。

当function1 第一次被调用时，$rootScope.Counter 不存在，因此它初始化为 1 并将其分配给局部变量 'Counter'。

so output look like
Global value is 1 
Child Instance of Function1 created :- 1

Child Instance of Function2 created :- 1

Child Instance of Function1 created :- NA // local scope for this is not created

Child Instance of Function2 created :- 1

现在 function2 将被调用。这会将全局变量 Counter 增加到 2 并使用它来显示

so output look like
Global value is 2 
Child Instance of Function1 created :- 1

Child Instance of Function2 created :- 2

Child Instance of Function1 created :- NA // local scope for this is not created

Child Instance of Function2 created :- 2

现在 function1 将再次被调用。这会将全局变量 Counter 增加到 3 并将其分配给局部变量。

so output look like
Global value is 3 
Child Instance of Function1 created :- 1

Child Instance of Function2 created :- 3

Child Instance of Function1 created :- 3 //Because rootScope already have counter variable with 2

Child Instance of Function2 created :- 3

最后再次调用function2，这将全局变量Counter增加到4并使用它来显示

so output look like
Global value is 4 
Child Instance of Function1 created :- 1

Child Instance of Function2 created :- 4

Child Instance of Function1 created :- 3

Child Instance of Function2 created :- 4