发表于: 2017-06-13 19:37:03

1 1138


今天完成的事情:

进行最新职位列表的编写。


明天的计划:

完成最新职位列表的轮播,进行跳转页面的编写。


遇到的问题:

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原型继承知识点的理解。



返回列表 返回列表
评论

    分享到