Angularjs“ Controller as”或“ $ scope”

Question

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

它们是否会对性能产生影响，如果可以，则首选哪种语法。

“控制器为”语法肯定会提高代码的可读性，因为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将获得parent属性，并且在我们更新父级时显示“ parentScope”，child也将得到更新。但是，如果我们现在更改了child属性，则更新父级不会修改child，因为它具有自己的scope属性。

b）如果我将控制器用作语法更改子节点，那么也会更新父节点。

Answer 1

过去，我已经为这个问题写了一些答案，它们基本上都归结为同一件事。在Angular中$scope，即使没有明确引用它，也正在使用。ControllerAs语法使Angular可以帮助您编写更高效，更容错的控制器。在幕后，当您使用ng-controller="theController as ctrl"Angular&nbsp;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分钟的演示，否则您真的应该使用ControllerA进行任何严肃的Angular工作。

Answer 2

我肯定会推荐Controller As语法。它更干净，更高效，您可以组织更多代码，这是AngularJS的新方法。除非您与习惯于$ scope语法的团队合作，否则请绝对使用Controller As。