Angularjs＆QUOT;控制器＆QUOT;或QUOT; $范围＆QUOT; [英] Angularjs "Controller as" or "$scope"

问题描述

我想知道什么是作为控制器中angularjs或$范围语法之间的主要区别。

1. 请他们有任何性能的影响，如果是其语法是preferable。


2. 控制器语法肯定提高了code的可读性，因为Knockout.js和其他JavaScript框架遵循相同的语法。



3. $范围将提供范围基业有时会给我们像

   怪异的行为

    ＆LT; D​​IV NG控制器=firstController＆GT;
    ParentController：LT;输入类型=文本NG模型=父/＆GT;
     ＆LT; D​​IV NG控制器=secondController＆GT;
       ChildController：LT;输入类型=文本NG模型=父/＆GT;
     ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;app.controller（'ParentController'，函数（$范围）{
     $ scope.parent =parentScope;
   }）控制器（'ChildController'，函数（$范围内）{/ *空* /}）;
    

   A）最初的孩子将得到parent属性，并显示parentScope当我们更新父子也将得到更新。但是，如果我们改变了孩子属性现在更新父不修改的孩子，因为它已经得到了它自己的作用域属性。

   二）如果我使用控制器的语法改变孩子也更新了父。

解决方案

我已经写了几个答案在过去这个问题，他们都基本上归结为同样的事情。在角度，您使用 $范围，即使你是不是前pressly引用它。

该ControllerAs语法允许角，以帮助你编写更高效，容错控制器。在幕后，当你使用 NG-控制器=theController作为CTRL，角创建 theController 作为一个属性 $范围并把它分配为 CTRL 。你现在有你是从范围引用一个对象的属性，并自动从原型继承问题的保护。

从性能的角度来看，因为你还在使用 $范围，应该有很少或几乎没有性能差异。然而，由于你的控制器现在是不是直接到 $范围在它自己的分配变量，它并不需要有 $范围注射。另外，控制器可以更加容易地在隔离测试，因为它现在是只是一个普通的JavaScript功能

这是一个前瞻性的思维的角度来看，它是深受现已知角2.0不会有 $范围，而是将使用的ECMAScript 6特性在任何$ P $通过显示迁移的角度团队发布pviews，他们首先通过重构控制器，以消除 $范围开始。如果你的code设计，无需使用 $范围基于控制器，在迁移的第一步已经完成。

从设计师的角度来看，ControllerAs语法使得它更加清晰，而对象是被操纵。有 customerCtrl.Address 和 storeCtrl.Address 使得它更容易识别您有一个地址，由多个不同的控制器分配针对不同的目的，而不是如果同时使用 $ scope.Address 。具有这两者都结合到 {{地址}} A页上的两个不同的HTML元素和知道哪一个是仅由元件被包含在控制器是一个重大的痛苦排查。

最后，除非你试图旋转起来有10分钟的演示，你真的应该使用ControllerAs任何严重角的工作。

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＆QUOT;控制器＆QUOT;或QUOT; $范围＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！