时间：2021-02-14 11:28:37 | 栏目：AngularJS | 点击：次
限定$scope的范围
JavaScript基于原型的继承与面向对象中基于类的继承有着微妙的区别，这通常不是什么问题，但这个微妙之处在使用$scope时就会表现出来。在AngularJS中，每个$scope都会继承父$scope，最高层称之为$rootScope。（$scope与传统指令有些不同，它们有一定的作用范围i，且只继承显式声明的属性。）
由于原型继承的特点，在父类和子类间共享数据不太重要，不过如果不小心的话，也很容易误用了一个父$scope的属性。
比如说，我们需要在一个导航栏上显示一个用户名，这个用户名是在登录表单中输入的，下面这种尝试应该是能工作的：
<div
ng-controller="navCtrl">
<span>{{user}}</span>
<div
ng-controller="loginCtrl">
<span>{{user}}</span>
<input
ng-model="user"></input>
</div>
</div>
那么问题来了……：在text input中设置了user的ng-model，当用户在其中输入内容时，哪个模版会被更新？navCtrl还是loginCtrl，还是都会？
如果你选择了loginCtrl，那么你可能已经理解了原型继承是如何工作的了。
当你检索字面值时，原型链并不起作用。如果navCtrl也同时被更新的话，检索原型链是必须的；但如果值是一个对象，这就会发生。（记住，在javascript中，函数、数组和对象都是对象）
所以为了获得预期的行为，需要在navCtrl中创建一个对象，它可以被loginCtrl引用。
<div
ng-controller="navCtrl">
<span>{{user.name}}</span>
<div
ng-controller="loginCtrl">
<span>{{user.name}}</span>
<input
ng-model="user.name"></input>
</div>
</div>
现在，由于user是一个对象，原型链就会起作用，navCtrl模版和$scope和loginCtrl都会被更新。
这看上去是一个很做作的例子，但是当你使用某些指令去创建子$scope，如ngRepeat时，这个问题很容易就会产生。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！