$ 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