AngularJs “controller as” 语法 - 澄清？

javascript angularjs

2022-08-30 04:59:50

我从angularJS中读到了关于新语法的信息controller as xxx

语法告诉 Angular 实例化控制器并将其保存在当前范围的可变发票中。InvoiceController as invoice

可视化：

enter image description here

好的，所以我不会在我的控制器中有参数，并且控制器中的代码会更干净。$scope

但

我将不得不在视图中指定另一个别名

所以到现在为止，我可以做：

<input type="number" ng-model="qty"  />

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty <--notice

现在我可以做：

 <input type="number" ng-model="invoic.qty"  /> <-- notice 

  ....controller('InvoiceController', function() {
       // do something with  this.qty  <--notice

问题

这样做的目的是什么？从一个地方删除并添加到另一个地方？

我会很高兴看到我错过了什么。

答案 1

关于它有几件事。

有些人不喜欢语法（不要问我为什么）。他们说他们只能使用.这是目标之一。$scopethis

明确属性的来源也非常有用。

您可以嵌套控制器，在阅读html时，很明显每个属性都来自何处。

您还可以避免一些点规则问题。

例如，如果有两个控制器，两者都具有相同的名称“name”，您可以执行以下操作：

<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">
        <input ng-model="name" /> {{name}} - {{$parent.name}}
    </div>
</body>

您可以修改父项和子项，这没有问题。但是您需要使用来查看父级的名称，因为您在子控制器中隐藏了它。在大量的html代码中可能会有问题，你不知道这个名字来自哪里。$parent$parent

有了你可以做：controller as

<body ng-controller="ParentCtrl as parent">
    <input ng-model="parent.name" /> {{parent.name}}

    <div ng-controller="ChildCtrl as child">
      <input ng-model="child.name" /> {{child.name}} - {{parent.name}}
    </div>
</body>

同样的例子，但读起来要清晰得多。

答案 2

我看到的语法的主要优点是，您可以将控制器作为类使用，而不仅仅是一些$scope修饰函数，并利用继承性。我经常遇到这样的情况：有一个功能与许多控制器非常相似，最明显的事情就是创建一个类并从中继承。controller asBaseController

尽管他们的代码是$scope继承性的，这部分解决了这个问题，但有些人更喜欢以更OOP的方式编写代码，在我看来，这使得代码更容易推理和测试。

这里有一个小提琴来演示：http://jsfiddle.net/HB7LU/5796/