Angularjs 中遇到的一些问题

有时候在controller中直接定义一个类似$scope.name = '小明'  这样的变量，然后在view中引用 ng-model="name",然后你修改这个变量的值，也许会出现controller中变量的值不发生变化。而如果你把变量定义成$cope.vm = {name:'小明'}  则不会出现这样的问题。原因似乎是原型继承。 下面我摘取了一段跟这个问题类似的问题的解释，想要更为详细的知道原因可以去了解原型继承以及$scope上的变量作用域原理。

 在Angular中，作用域是通过原型链进行继承的。而这种继承有一个问题，那就是在子类中对变量进行赋值时，不会去修改父级的。

假设scopeA继承自scopeB，而在scopeB中定义了一个变量value: 1，这时候，读取scopeA.value可以正确取到值，但是如果赋值，就有问题了 scopeA.value = 2，这时候，scopeB.value的值是多少呢？你可能以为是2，但它是1！原因就在于原型继承时对变量的赋值不会修改原型中的值，而是直接在当前scope中创建一个同名的属性。

这个现象导致了一个容易让新手困惑的问题：

下面的代码工作正常：

<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}}

它的原因就在于color值定义在当前scope中，而ng-repeat创建了一个子scope，它使用原型继承的方式从父级继承下来。对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定义成了一个vm对象的属性，这时候，因为只需要对vm的成员进行赋值，而不存在对vm进行赋值的情况，所以赋值会正确的作用于父级scope上。这里的vm只是$scope上的一个对象，叫别的名字也可以，只是因为它的实际作用是ViewModel，所以我习惯于把它命名为vm。

在Angular 1.2以后的版本中引入了controllerAs语法，可以一劳永逸的解决这个问题。具体的用法请参见http://www.cnblogs.com/whitewolf/p/3493362.html

如果使用1.2以下的版本，可以在controller的第一句加上这样的语法来模拟：

var vm = $scope.vm = {};
所有的$scope变量都改为赋值给vm变量就可以了，view中也要相应的引用vm变量。