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)最初,子将获取父属性,并且当我们更新父子时它将显示'parentScope'也将更新.但是如果我们现在更改了子属性,则更新父级不会修改子级,因为它有自己的scope属性.

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

Answer 1

我过去曾为这个问题写了几个答案,而且它们基本上归结为同样的事情.在Angular中,您正在使用$scope,即使您没有明确地引用它.

ControllerAs语法允许Angular帮助您编写更高效,容错的控制器.在幕后,当您使用时ng-controller="theController as ctrl",Angular 会将其创建theController为属性$scope并将其指定为ctrl.您现在拥有一个从作用域引用的对象属性,并自动受到原型继承问题的保护.

从性能角度来看,由于您仍在使用$scope,因此应该几乎没有性能差异.但是,由于您的控制器现在不直接将变量分配给$scope它自己,因此不需要$scope注入.此外,控制器可以更容易地单独测试,因为它现在只是一个简单的JavaScript函数.

从前瞻性思维的角度来看,现在众所周知Angular 2.0不具备$scope,而是将使用ECMAScript 6的功能.在Angular团队发布的任何预览中显示迁移,它们首先通过重构控制器来消除$scope.如果您的代码是在不使用$scope基于控制器的情况下设计的,那么迁移的第一步已经完成.

从设计者的角度来看,ControllerAs语法使对象被操作的位置更加清晰.拥有customerCtrl.Address和storeCtrl.Address使得它更容易识别,你必须通过多个不同的控制器不同的目的,而不是如果同时使用分配一个地址$scope.Address.在页面上有两个不同的HTML元素,这两个HTML元素都绑定到{{Address}}并且知道哪一个仅由控制器包含元素,这是一个很难解决的问题.

最终,除非你试图启动10分钟的演示,否则你应该将ControllerAs用于任何严肃的Angular工作.