Question

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

它们是否会对性能产生任何影响，如果是，则优先使用哪种语法。
“Controller as”语法肯定会提高代码的可读性，因为Knockout.js和其他JavaScript框架遵循相同的语法。

$ 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会获取父属性，当我们更新父子时它会显示'parentScope'也会更新。但是如果我们现在更改了子属性，则更新父级不会修改子级，因为它有自己的范围属性。

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元素，它们都绑定到{{Address}}，并知道哪个只是由控制器包含的元素，这是一个很难解决的问题。

最终，除非你试图启动一个10分钟的演示，否则你真的应该使用ControllerAs进行任何严肃的Angular工作。

Answer 2

我肯定会推荐Controller As语法。

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

除非您与使用$ scope语法的团队合作，否则请务必使用Controller As。

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

2 个答案: