Angular 实践之Controller As

Angular Controller声明

入门

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

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

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

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

复杂场景

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

<div ng-controller="ParentController">    <div ng-controller="ChildController">        <span>{{name}}</span>    </div></div>
1
2
3
4
5
1
2
3
4
5

function ParentController($scope){    $scope.name = "Ada";}function ChildController($scope){    $scope.name = "Bill";}
1
2
3
4
5
6
7
1
2
3
4
5
6
7

这个时候，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>
1
2
3
4
5
6
1
2
3
4
5
6

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

<div ng-controller="ParentController">    <div ng-controller="MiddController">        <div ng-controller="ChildController">            <span>{{name}}</span>            <br>{{$parent.name}}</br>        </div>    </div></div>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

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

这个时候，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>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

更好的方法

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

<div ng-controller="ParentController as pc">    <div ng-controller="ChildController as cc">        <span>{{pc.name}}</span>        <br>{{cc.`name`}}</br>    </div></div>
1
2
3
4
5
6
1
2
3
4
5
6

function ParentController(){    this.name = "Ada";}function ChildController(){    this.name = "Bill";}
1
2
3
4
5
6
7
1
2
3
4
5
6
7

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>