Angular 实践之Controller As

关于

本文是作者的一些实践经验，很多方面，也许只是个人拙见。

Angular Controller声明

入门

学习angular是从下面这一段代码开始

<div ng-controller="MyController">
    <span>{{name}}</span>
</div>

function MyController($scope){
    $scope.name = "Duge";
}

然后Duge就会出现在div下的span中了，很简单的数据绑定，而且是双向的。这意味着可以很简单的通过改变js对象来影响dom的value了。

复杂场景

很多时候一个controller并不能满足业务需求。

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <span>{{name}}</span>
    </div>
</div>

function ParentController($scope){
    $scope.name = "Ada";
}

function ChildController($scope){
    $scope.name = "Bill";
}

这个时候，span中会显示什么呢？

熟悉变量作用域的我很轻易的判断出，应该会显示Bill。事实也确实如此。

看起来angular在一些基本行为上，和普通的语言或者框架，是有一些共同之处的。

那么，考虑这种情况，在ChildController的div中，显示ParentController的name。

可以通过scope的继承关系。

<div ng-controller="ParentController">
        <div ng-controller="ChildController">
            <span>{{name}}</span>
            <br>{{$parent.name}}</br>
        </div>
</div>

如何再加一个controller在中间呢？

<div ng-controller="ParentController">
    <div ng-controller="MiddController">
        <div ng-controller="ChildController">
            <span>{{name}}</span>
            <br>{{$parent.name}}</br>
        </div>
    </div>
</div>

function MiddController($scope){
    $scope.name = "Mill";
}

这个时候，br中的name就变成Mill了。
当然，如果去掉MiddController中的name，br中的name依然还是Ada。这是因为子scope默认会继承父scope的属性。当MiddController中没有name时，ParentController中的name就会被‘添加’到MiddController中，这样，ChildController就会通过$parent.name获取到这个name了。这是题外话。

可见，通过嵌套关系来访问一些变量是很不牢固可靠的。如果嵌套关系改变，就需要重新调整html中的表达式。

<div ng-controller="ParentController">
    <div ng-controller="MiddController">
        <div ng-controller="ChildController">
            <span>{{name}}</span>
            <br>{{$parent.$parent.name}}</br>
        </div>
    </div>
</div>

更好的方法

angular有针对这个的解决方法，这也是推荐的方式。

<div ng-controller="ParentController as pc">
    <div ng-controller="ChildController as cc">
        <span>{{pc.name}}</span>
        <br>{{cc.`name`}}</br>
    </div>
</div>

function ParentController(){
    this.name = "Ada";
}

function ChildController(){
    this.name = "Bill";
}

span中就是ParentController中name，br中就是ChildController中name。这里的name也不需要绑定到$scope上，所以省略了$scope。
pc和cc可以认为分别是ParentController和ChildController的实例（instance）。

通过instance的名字来访问属性，非常的方便，而且明了。即使html结果发生变化，也不影响使用。如下

<div ng-controller="ParentController as pc">
    <div ng-controller="MiddController">
        <div ng-controller="ChildController as cc">
            <span>{{pc.name}}</span>
            <br>{{cc.name}}</br>
        </div>
    </div>
</div>