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

IT技术 javascript angularjs
2021-01-26 09:35:20

我想知道 angularjs 中“Controller as”或“$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) 最初 child 将获得 parent 属性,当我们更新 parent child 时,它显示 'parentScope' 也会更新。但是,如果我们现在更改了 child 属性,则更新 parent 不会修改 child,因为它有自己的 scope 属性。

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

2个回答

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

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

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

从前瞻性的角度来看,现在众所周知 Angular 2.0 将没有$scope,而是会使用 ECMAScript 6 的功能。在 Angular 团队发布的任何展示迁移的预览中,他们首先开始重构控制器以消除$scope. 如果您的代码是在不使用$scope基于控制器的情况下设计的,那么您迁移的第一步已经完成。

从设计者的角度来看,ControllerAs 语法使得操作对象的位置更加清晰。拥有customerCtrl.AddressstoreCtrl.Address使您更容易识别多个不同控制器为不同目的分配的地址,而不是两者都使用$scope.Address在一个页面上有两个不同的 HTML 元素,它们都绑定到{{Address}}并且知道哪个元素是哪个元素包含在其中的控制器是排除故障的主要痛苦。

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

我在执行类似的答案时遇到问题,请参阅stackoverflow.com/questions/38315538
2021-04-06 09:35:20

我肯定会推荐 Controller As 语法。

它更干净、更高效,你可以组织更多的代码,这是处理 AngularJS 的新方式。

除非您与习惯了 $scope 语法的团队一起工作,否则一定要使用 Controller As。