Angularjs“ Controller as”或“ $ scope”

Question

我想知道angularjs中“ Controller as”或“ $ scope”語法之間的主要區別是什么。

1. 它們是否會對性能產生影響，如果可以，則首選哪種語法。
2. “控制器為”語法肯定會提高代碼的可讀性，因為Knockout.js和其他JavaScript框架遵循相同的語法。

3. $ scope將提供范圍繼承，有時會給我們帶來奇怪的行為，例如

    <div ng-controller="firstController"> ParentController: <input type="text" ng-model="parent"/> <div ng-controller="secondController"> ChildController: <input type="text" ng-model="parent" /> </div> </div> app.controller('ParentController', function ($scope) { $scope.parent = "parentScope"; }).controller('ChildController', function ($scope) { /*empty*/ }); 

   a）最初child將獲得parent屬性，並且在我們更新父級時顯示“ parentScope”，child也將得到更新。 但是，如果我們現在更改了child屬性，則更新父級不會修改child，因為它具有自己的scope屬性。

   b）如果我將控制器用作語法更改子節點，那么也會更新父節點。

Answer 1

過去，我已經為這個問題寫了一些答案，它們基本上都歸結為同一件事。 在Angular中，即使沒有明確引用它，也使用$scope 。

ControllerAs語法使Angular可以幫助您編寫更高效，更容錯的控制器。 在后台，當您使用ng-controller="theController as ctrl" ，Angular在$scope上創建theController作為屬性並將其分配為ctrl 。 現在，您有了要從作用域引用的對象屬性，並且可以自動免受原型繼承問題的影響。

從性能的角度來看，由於您仍在使用$scope ，因此幾乎沒有性能差異。 但是，由於您的控制器現在不再自己直接向$scope分配變量，因此不需要注入$scope 。 而且，由於現在它只是一個普通的JavaScript函數，因此可以更容易地對控制器進行隔離測試。

從前瞻性角度來看，現在眾所周知Angular 2.0將不再具有$scope ，而是將使用ECMAScript 6的功能。在Angular團隊發布的任何顯示遷移的預覽中，它們首先都是通過重構控制器以消除$scope來開始的。 $scope 。 如果您的代碼在設計時未使用基於$scope的控制器，則遷移的第一步已經完成。

從設計者的角度來看，ControllerAs語法使在對象的操作位置更加清晰。 與使用$scope.Address相比，擁有customerCtrl.Address和storeCtrl.Address可以更容易地確定您有一個由多個不同的控制器為不同目的分配的地址。 在頁面上有兩個不同的HTML元素，它們都綁定到{{Address}} ，並且僅通過控制器知道該元素包含在哪個元素中，這是解決問題的主要麻煩。

最終，除非您嘗試啟動一個10分鍾的演示，否則您真的應該使用ControllerA進行任何嚴肅的Angular工作。

Answer 2

我肯定會推薦Controller As語法。

它更干凈，更高效，您可以組織更多代碼，這是AngularJS的新方法。

除非您與習慣於$ scope語法的團隊合作，否則請絕對使用Controller As。