angularjs - Angular中的 "Controller as"有什么优势？

Question

在 Angular 中使用“Controller as”语法有什么好处？只是为 Controller 创建别名还是在幕后有其他一些技术原因？

我是 Angular 的新手，想了解更多关于这种语法的信息。

Answer 1

controllerAs -syntax 有多个优点:

澄清

考虑以下示例:

<div ng-controller="containerController">
    <h2>Improve your life!</h2>
    <p ng-controller="paragraphController">
        We talk about {{topic}} a lot, but do we really understand it? 
        Read this article to enhance your knowledge about {{topic}}
    </p>
</div>

光看这段代码，你也分不清 topic在哪里来自。是否属于 containerController , 到 paragraphController还是只是上面输入的随机 float 范围变量？

通过使用 controllerAs很清楚:

<div ng-controller="containerController as container">
    <h2>Improve your life!</h2>
    <p ng-controller="paragraphController as paragraph">
        We talk about {{paragraph.topic}} a lot, but do we really understand it? 
        Read this article to enhance your knowledge about {{paragraph.topic}}
    </p>
</div>

您可以立即看到 topic是 paragraphController 的属性.这使得代码整体上更具可读性，因为它迫使开发人员明确 scope 中的函数和变量是谁。属于。

绑定(bind)到属性

当您使用旧的 controller语法，当您在不同范围内对“相同”变量进行多个绑定(bind)时，可能会发生奇怪的事情。考虑这个例子:

<form ng-controller="myFormController">
    <input type="text" ng-model="somefield">

    <div ng-controller="someOtherController">
        <input type="text" ng-model="somefield">
    </div>
</form>

它看起来像 input s 绑定(bind)到同一个变量。他们不是。当您编辑第一个 input 时，一切看起来都正常。第一个，但是一旦您编辑第二个，它们将不再同步。这与作用域继承和绑定(bind)的工作方式有关( and there is an excellent answer on this on SO)。当您绑定(bind)到对象属性时(也就是当您的 . 属性中有 ng-model 时)，这不会发生。与 controllerAs无论如何，您都绑定(bind)到 Controller 对象的属性，因此它自然地解决了该问题:

<form ng-controller="myFormController as myForm">
    <input type="text" ng-model="myForm.somefield">

    <div ng-controller="someOtherController as other">
        <input type="text" ng-model="myForm.somefield">
    </div>
</form>

它摆脱了scope (大部分)

使用 scope创建到 controller 的绑定(bind)如果您使用 controllerAs，旧 Angular 代码中的 s 难以阅读、难以理解且完全没有必要。 .您不再需要注入(inject) scope进入每一个 controller ，事实上你可能不会在大多数应用程序中注入(inject)它(如果你想使用 Angular 事件系统，你仍然需要这样做)。这导致更干净的 Controller 代码和更少的奇怪样板。

它为 Angular 2 做准备

In angular 2, scope will be gone and we will write everything as components .使用 controllerAs让您在没有 scope 的情况下工作并迫使您更多地考虑面向组件，从而为 2.0 更新做好准备(以及您最终要迁移的应用程序)。