Angularjs“控制器为”或“$scope”

Question

我想知道angularjs中“Controller as”或“$scope”语法的主要区别是什么。

1. 它们是否对性能有任何影响，如果有，哪种语法更可取。
2. “Controller as”语法肯定会提高代码的可读性，因为 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 属性，现在更新 parent 并不会修改 child，因为它有自己的 scope 属性。

   b) 如果我使用控制器作为语法更改子级也会更新父级。

Answer 1

我肯定会推荐 Controller As 语法。

它更干净、更高效，您可以更多地组织您的代码，这是 AngularJS 的新方法。

除非你和一个习惯了 $scope 语法的团队一起工作，否则一定要使用 Controller As。

Answer 2

我过去曾为这个问题写过一些答案，它们基本上都归结为同一件事。在 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 的控制器，那么您迁移的第一步已经完成。

从设计者的角度来看，ControllerAs 语法使对象被操作的位置更加清晰。拥有customerCtrl.Address 和storeCtrl.Address 比同时使用$scope.Address 更容易识别您拥有由多个不同控制器分配用于不同目的的地址。在一个页面上有两个不同的 HTML 元素，它们都绑定到 {{Address}}，并且仅通过控制器知道哪个是哪个元素包含在其中是一个主要的故障排除问题。

最终，除非您尝试启动一个 10 分钟的演示，否则您真的应该将 ControllerAs 用于任何严肃的 Angular 工作。