$ 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，但是没有使用本地范围，因此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它将在rootScope中Counter当前值为4时显示4。

如果要获得所需的答案，则必须在Function2子作用域计数器中分配值，例如Function1

像这样

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

普伦克

Answer 3

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

如果希望$scope是更近代的子代或大子代，则可以使用$scope = $rootScope.$new()创建$ scope，但这不是很实际。 如果使用$rootScope.$new()创建$scope ，则可以保证具有与$rootScope相同的Counter值，但是通过这种方式没有太多其他好处。

Answer 4

您可以这样理解它：$ rootScope是最主要的作用域，而所有其他作用域（即$ scope）都位于此作用域之内。 因此，如果必须在范围之间传递值，则必须使用$ rootScope。

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

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

第一次调用function1时，由于不存在$rootScope.Counter ，因此将其初始化为一个并将其分配给本地变量'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