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＆amp; 3。

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

请记住$rootScope对于使用它的所有内容都是一样的。因此，如果两个地方将1添加到rootScope值，则该值最终将添加2。

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

Answer 2

Scope是controller

的一个实例

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

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

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

如果父和子的变量都是同一个名字，那么子项将被执行。

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

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

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

所以Simmulation将是

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的任何地方的两个绑定，它将打印4，因为Counter中的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，则可以保证Counter具有与$rootScope相同的atan值，但这样做并没有带来太多其他好处。

Answer 4

您可以通过这种方式理解它$ rootScope是最顶级的范围，所有其他范围（即$ scope）都在此范围内。因此，你必须在范围之间传递值，然后你必须使用$ rootScope。

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

在你的情况下（记住角度支持双向绑定，所以每当全局值改变它在所有地方改变时），控制器按以下顺序调用function1 - ＆gt; function2 - ＆gt; function1 - ＆gt;函数2。

第一次调用function1 $rootScope.Counter时，{1}}不会出现，因此会初始化为1并将其分配给本地变量＆＃39; Counter＆＃39;。

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

$ scope和$ rootscope混淆

4 个答案: