Angularjs的控制器"或“scope"美元

Angularjs "Controller as" or "$scope"

本文关键字：quot scope 美元 Angularjs 控制器      更新时间：2023-09-26

我想知道angularjs中"Controller as"answers"$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)如果我使用控制器作为语法更改子也更新父。

我曾经写过一些关于这个问题的答案，它们基本上都归结为同一件事。在Angular中，你是在使用$scope，即使你没有明确引用它。

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

从性能的角度来看，由于您仍然在使用$scope，因此应该没有什么性能差异。然而，因为你的控制器现在不直接分配变量给$scope自己，它不需要有$scope注入。此外，控制器可以更容易地独立测试，因为它现在只是一个普通的JavaScript函数。

从前瞻性的角度来看，现在大家都知道Angular 2.0不会有$scope，而是会使用ECMAScript 6的特性。在Angular团队发布的任何展示迁移的预览中，他们都会首先重构控制器以消除$scope。如果在设计代码时没有使用基于$scope的控制器，那么迁移的第一步就已经完成了。

从设计者的角度来看，ControllerAs语法使对象被操作的位置更加清晰。与使用$scope.Address相比，使用customerCtrl.Address和storeCtrl.Address可以更容易地识别由多个不同控制器为不同目的分配的地址。在一个页面上有两个不同的HTML元素，它们都绑定到{{Address}}，并且只通过包含元素的控制器知道哪个是哪个，这是解决问题的主要难点。

最后，除非你想做一个10分钟的演示，否则你真的应该在任何严肃的Angular工作中使用controllera。

我绝对推荐Controller As语法。

它更干净，更高效，你可以更组织你的代码，这是做AngularJS的新方式。

除非你的团队已经习惯了$scope语法，否则一定要使用Controller As。

相关文章：