Angularjs“控制器为"或“$scope" [英] Angularjs "Controller as" or "$scope"

问题描述

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

1. 它们是否有任何性能影响，如果是，哪种语法更可取.
2. Controller as"语法肯定会提高代码的可读性，因为 Knockout.js 和其他 JavaScript 框架遵循相同的语法.

3. $scope 将提供范围继承，这有时会给我们带来奇怪的行为，例如

   ParentController: <input type="text" ng-model="parent"/><div ng-controller="secondController">ChildController: <input type="text" ng-model="parent"/>
   

app.controller('ParentController', function ($scope) {$scope.parent = "parentScope";}).controller('ChildController', function ($scope) {/*empty*/});

a) 最初 child 将获得 parent 属性，当我们更新 parent 时，它会显示parentScope"，child 也会更新.但是，如果我们现在更改了 child 属性，则更新 parent 不会修改 child，因为它有自己的 scope 属性.

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

解决方案

我过去曾写过一些关于这个问题的答案，它们基本上都归结为同一件事.在 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 更容易识别多个不同控制器为不同目的分配的地址.地址.在一个页面上有两个不同的 HTML 元素，它们都绑定到 {{Address}} 并且知道哪个是哪个，只有通过控制器包含元素是一个主要的故障排除.

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

I would like to know what is the main difference between "Controller as" or "$scope" syntax in angularjs.

1. Do they have any performance impact,if yes which syntax is preferable.
2. "Controller as" syntax surely improve the readability of the code,as Knockout.js and other JavaScript framework follows the same syntax.

3. $scope will provide scope inheritance which sometimes give us weird behavior like

   <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) Initially child will get the parent property and it displays 'parentScope' when we update parent child will also get updated. But if we have changed the child property now updating the parent doesn't modify child as it has got its own scope property.

   b) If i am using controller as syntax changing child also updates the parent.

解决方案

I've written a few answers to this question in the past, and they all essentially boil down to the same thing. In Angular, you are using $scope, even when you aren't expressly referencing it.

The ControllerAs syntax allows Angular to help you to write more efficient, fault tolerant controllers. Behind the scenes, when you use ng-controller="theController as ctrl", Angular creates theController as a property on $scope and assigns it as ctrl. You now have an object property you are referencing from scope, and are automatically protected from prototype inheritance issues.

From a performance perspective, since you are still using $scope, there should be little to no performance difference. However, since your controller is now not assigning variables directly to $scope on it's own, it does not need to have $scope injected. Also, the controller can much more easily be tested in isolation, since it is now just a plain JavaScript function.

From a forward thinking perspective, it's well known by now that Angular 2.0 will not have $scope, but instead will use features of ECMAScript 6. In any previews released by the Angular team showing migrations, they first begin by refactoring the controller to eliminate $scope. If your code is designed without the use of $scope based controllers, your first step in a migration is already complete.

From the designer's perspective, the ControllerAs syntax makes it much clearer where objects are being manipulated. Having customerCtrl.Address and storeCtrl.Address makes it much easier to identify that you have an address assigned by multiple different controllers for different purposes than if both used $scope.Address. Having two different HTML elements on a page which both are bound to {{Address}} and knowing which one is which only by the controller the element is contained in is a major pain to troubleshoot.

Ultimately, unless you are trying to spin up a 10 minute demo, you really should be using ControllerAs for any serious Angular work.

这篇关于Angularjs“控制器为"或“$scope"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！