关于
本文是作者的一些实践经验,很多方面,也许只是个人拙见。
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>