在Angular中，爲什麼你總是在你的$ scope中使用對象？

Question

我已經在不同的地方閱讀過，重要的是你總是在你的示波器中使用物體，但是我還沒有找到明確的答案。有人可以幫幫我嗎？

Answer 1

我喜歡Ryan Q的回答，但是在做了一些更多的研究之後，我想添加一個更重視javascript原型繼承的答案。

這裏的問題是一個對象與原始問題（通過引用傳遞並通過值傳遞）以及Javascript的原型繼承如何工作。

當JavaScript類繼承自父類時，它將值複製到子類中。有兩種可以複製的值，對象或基元。

當通過繼承複製對象時，它通過引用傳遞。這意味着我在子對象中所做的更新也會在父對象中看到。

當通過繼承複製一個原語時，它通過值傳遞。這意味着任何更新都不會在父類中看到。

這與角度範圍有什麼關係？當我們創建一個指令時，將爲該指令創建一個範圍，我們可以將其聲明爲一個獨立範圍或一個繼承範圍。如果它是一個繼承範圍，它將繼承其父項範圍項目。現在，如果我的父範圍中有原始值，我將通過值傳遞將它們繼承到我的子範圍中。這意味着當我在我的父作用域中進行更改時，它不會在我的子作用域中看到，反之亦然。現在我可以在具有不同值的子和父範圍中使用相同的繼承變量。這會導致混亂......。並可能憤怒......大聲笑。

所以如果你只是使用一個對象，那麼這個問題就不會發生。這就是爲什麼你總是應該在範圍內反對的原因。

Answer 2

看看這個： https://github.com/angular/angular.js/wiki/Understanding-Scopes 和 Does my ng-model really need to have a dot to avoid child $scope problems?

Answer 3

比方說你有3個控制器，主控制，另外兩個從主控制繼承。

您的html可能看起來像這樣。

<div ng-controller="MainCtrl"> 
    <div ng-show="helloWorld">Hello World</div> 
    <div ng-controller="Sub1Ctrl"> 
    <button type="button" ng-click="helloWorld = false">Hide Hello World</button> 
    </div> 
    <div ng-controller="Sub2Ctrl"> 
    <button type="button" ng-click="helloWorld = false">Hide Hello World</button> 
    </div> 
</div> 

你的主控制器

angular.module('MyModule').controller('MainCtrl', function($scope){ 
    $scope.helloWorld = true; 
}); 

一切都很好，很正常，你的世界你好元素顯示如預期。現在嘗試單擊將helloWorld設置爲false的那些按鈕之一。你Sub1Ctrl現在這個樣子：

angular.module('MyModule').controller('Sub1Ctrl', function($scope){ 
    $scope.helloWorld = false; 
}); 

但你MainCtrl仍將

angular.module('MyModule').controller('MainCtrl', function($scope){ 
    $scope.helloWorld = true; 
}); 

這是爲什麼？那麼因爲當Angular評估「helloWorld = false」時，它會在內部設置$ scope [「helloWorld」] = false。這個問題是因爲你將它設置在較低的Sub1Ctrl上，從未設置較高的控制器。

如果你改變你的HTML和MainCtrl這樣：

<div ng-controller="MainCtrl"> 
    <div ng-show="myModel.helloWorld">Hello World</div> 
    <div ng-controller="Sub1Ctrl"> 
    <button type="button" ng-click="myModel.helloWorld = false">Hide Hello World</button> 
    </div> 
    <div ng-controller="Sub2Ctrl"> 
    <button type="button" ng-click="myModel.helloWorld = false">Hide Hello World</button> 
    </div> 
</div> 

angular.module('MyModule').controller('MainCtrl', function($scope){ 
    $scope.myModel = { 
    helloWorld: true 
    } 
}); 

然後角度將查找並將其值設置之前是否在範圍內的原型存在的對象（即控制器通過Scope Hierarchy如何繼承） 。

所以現在Angular評估Sub1Ctrl上的「myModel.helloWorld」，它最終在父MainCtrl上查找「myModel」，並將helloWorld屬性設置爲false。

Answer 4

因爲那麼你將數據保存在一個地方。例如，子範圍（不是獨立範圍）可以隱藏屬性「消息」。所以父範圍和子範圍都有一個「消息」屬性。但是，如果父範圍具有「data.message」屬性，則除非在子範圍中首先創建一個屬性「data」，然後再指定「data.message」，否則子範圍無法影響此屬性，但這不是AngularJS所做的。但是AngularJS確實在父範圍內創建了第一個「數據」，然後是「data.message」。