Question

使用＆＃34; Controller作为＆＃34;有什么好处？ Angular中的语法？是仅为控制器创建别名还是在幕后有其他技术原因？

我是Angular的新手，想要了解有关此语法的更多信息。

Answer 1

controllerAs - 语法有多个优点：

<强> Clartiy

考虑以下示例：

<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还是只是来自上面输入的随机浮动范围变量？

使用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中的函数和变量属于谁。

绑定到属性

当您使用旧的controller语法时，如果在不同的范围内有多个绑定到＆＃34;相同的＆＃34;变量。考虑这个例子：

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

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

看起来两个input都绑定到同一个变量。他们不是。当你第一次编辑第一个input时，一切看起来都很好，但是一旦你编辑第二个，他们就不会再同步了。这与范围继承和绑定工作（and there is an excellent answer on this on SO）的方式有关。绑定到对象属性时（即，. - 属性中有ng-model时），这不会发生。使用controllerAs无论如何都会绑定到控制器对象的属性，因此它自然地解决了这个问题：

<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在旧角度代码中创建与controllerAs的绑定很难阅读，难以理解且完全没必要。您不再需要将scope注入每个controller，事实上您可能不会在大多数应用程序中注入它（如果您想使用角度事件系统，仍需要这样做）。这样可以实现更清晰的控制器代码，并且具有更少的奇怪样板。

准备Angular 2

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

＆＃34; Controller as＆＃34;的优点是什么？在Angular？

1 个答案: