发表于: 2017-06-13 19:37:03
1 1139
今天完成的事情:
进行最新职位列表的编写。
明天的计划:
完成最新职位列表的轮播,进行跳转页面的编写。
遇到的问题:
1 angular作用域的原型继承:
下面的代码工作正常:
<label><input type="radio" ng-model="color" value="red"> Red </label><br/>
<label><input type="radio" ng-model="color" value="green"> Green</label><br/>
<label><input type="radio" ng-model="color" value="blue"> Blue </label><br/>
{{color}}
而下面的代码工作不正常,color值将不会随着选择而变化:
<div ng-repeat="value in ['red', 'green', 'blue']">
<label><input type="radio" ng-model="color" ng-value="value"> {{value}} </label>
</div>
{{color}}
要想让它正常工作,就改成这样:
<div ng-repeat="value in ['red', 'green', 'blue']">
<label><input type="radio" ng-model="vm.color" ng-value="value"> {{value}} </label>
</div>
{{vm.color}}
它的原因就在于color值定义在当前scope中,而ng-repeat创建了一个子scope,它使用原型继承的方式从父级继承下来。对color值的修改,会去修改子级的变量,而父级的同名变量不会被修改。
在Angular中,作用域是通过原型链进行继承的。而这种继承有一个问题,那就是在子类中对变量进行赋值时,不会去修改父级的。
假设scopeA继承自scopeB,而在scopeB中定义了一个变量value: 1,这时候,读取scopeA.value可以正确取到值,但是如果赋值,就有问题了 scopeA.value = 2,这时候,scopeB.value的值是多少呢?你可能以为是2,但它是1!原因就在于原型继承时对变量的赋值不会修改原型中的值,而是直接在当前scope中创建一个同名的属性。
这里,把color定义成了一个vm对象的属性,这时候,因为只需要对vm的成员进行赋值,而不存在对vm进行赋值的情况,所以赋值会正确的作用于父级scope上。这里的vm只是$scope上的一个对象,叫别的名字也可以,只是因为它的实际作用是ViewModel,所以我习惯于把它命名为vm。
在Angular 1.2以后的版本中引入了controllerAs语法,可以一劳永逸的解决这个问题。
收获:
angular原型继承知识点的理解。
评论