Question

在最近的1.2.x角度版本（可能也更旧）中，可以使用表达式

初始化控制器

<div ng-controller="demoController as vm"></div>

文档解释如下：

控制器实例可以通过发布到范围属性中指定为propertyName。

http://code.angularjs.org/1.2.4/docs/api/ng.directive:ngController

这在哪些情况下有帮助？

Answer 1

控制器使用new进行实例化，因此它是一个原型对象。意思是它可以有原型方法。但是，从视图中调用这些方法作为未绑定方法，并将“this”设置为范围。这在很大程度上违背了它作为原型对象的目的，因为方法中的“this”无法到达对象实例。

实际上有一些来回此... Angular pre-1.0使用“this”作为控制器实例，我忘记了它是如何工作的，也许控制器实例和范围是同一个。使用Angular 1.2+，它有点回归那种风格，将控制器函数更多地视为构造函数而不仅仅是函数集合。

在这个新的1.2样式中，你只需要向作用域添加一个东西（控制器实例）并引用它的所有数据。这样做的好处是可以使用带有原型方法的“类似”构造函数形式的控制器，并且可以方便地解决写入超出实现范围的范围内的ng模型的常见问题。解决方法是在左值表达式的某处包含一个点。

Answer 2

使用控制器作为语法有一些优点：

如果您使用的是typescript或coffeescript这样的语言，那么您可以轻松地为您的控制器使用一个类：

//TypeScript example
class MyCtrl {
    name: string = "";

    constructor(private $log) {
        $log.info("Initializing MyCtrl");
    }

    doSomething() {
        this.name = "foo"
    }
}

示例视图

<div ng-controller="MyCtrl as ctrl"> 
    <span ng-click="ctrl.doSomething()">{{ctrl.name}}</span>
</div>

即使您没有使用coffeescript或typescript，您也可以使用原型做同样的事情....它看起来有点丑陋。

如果视图中有多个控制器，那么使用“controller as”语法将确保您没有任何命名冲突
对于使用$ scope的角度初学者来说可能会让人感到困惑

为什么要将Angular控制器实例发布到范围属性中？

2 个答案: