Angular路由中的controller常常有as vm, 有何作用?

Question

比如下面这段代码:

    $stateProvider.state({
        name: 'reader.create',
        url: '/create',
        templateUrl: 'controllers/reader/create.html',
        controller: 'ReaderController as vm'
    });

但是在对应的controller中, 又有

    var vm = this;

这么一句.

这到底有什么用?

Answer 1

首先这里的 vm 是指 View Model。

其实，关于这个问题，有三个重要的原因：

历史原因

controller as 是1.2之后才有，和 $scope 作用其实一样，哪怕你混合着用也是没有问题，但这样看起来非常的奇怪。

模板作用域

当然，不光如此，不然还要造个 controller as 做什么，是吧！

这是因为早先 $scope 对于子组件默认继承父组件的数据，但又不会被覆盖，而反之又是隔离的，例如：

function ParentCtrl($scope) {
    $scope.name = 'asdf';
    $scope.age = 25;
}
function ChildCtrl($scope) {
    $scope.age = 26;
}

<div ng-controller="ParentCtrl">
    <p>name:{{name}},age:{{age}}</p>
    <div ng-controller="ChildCtrl">
        <p>child name:{{name}},age:{{age}}</p>
    </div>
</div>

ChildCtrl 并没有定义 name，但依然可以显示：asdf。这就是继承关系，通过这种方式来访问一些变量很不可靠，或者说并不直观。所以，才有 controller as。

<div ng-controller="ParentCtrl as p">
    <p>name:{{p.name}},age:{{p.age}}</p>
    <div ng-controller="ChildCtrl as c">
        <p>child name:{{p.name}},age:{{c.age}}</p>
    </div>
</div>

这样的写法不是更明了，直观了吗？

控制器 $scope !== this

先理解模板，那再看这一条就明了许多。

为了不让 $scope 默认继承父组件的内容，因此需要使用 this 让这些东西不再和子组件有瓜葛。

function ChildCtrl($scope) {
    var vm = this;
    console.log(vm === $scope) // false;
}

this 与 $scope 完全不一样，前者就是明确表示控制组实例，而后者是一个比较奇特的this怪咖。

最后关于 var vm = this，你要愿意叫一个 var funkScopeTenThousandsYear = this 也行。

以上！

Answer 2

别名，这样就可以在模板里写 {{vm.data}} 而不是{{data}}啦。尤其是在多个controller的scope有覆盖的情况下，可以帮助你明确这个变量是哪个controller的。此外，在写controller的时候就可以用 this而不用丑陋的$scope啦