限定$scope的范围
来源:互联网 发布:网络上的怼是什么意思 编辑:程序博客网 时间:2024/06/05 00:32
限定$scope的范围
Javascript基于原型的继承与面向对象中基于类的继承有着微妙的区别,这通常不是什么问题,但这个微妙之处在使用$scope时就会表现出来。在AngularJS中,每个$scope都会继承父$scope,最高层称之为$rootScope。($scope与传统指令有些不同,它们有一定的作用范围i,且只继承显式声明的属性。)
由于原型继承的特点,在父类和子类间共享数据不太重要,不过如果不小心的话,也很容易误用了一个父$scope的属性。
比如说,我们需要在一个导航栏上显示一个用户名,这个用户名是在登录表单中输入的,下面这种尝试应该是能工作的:
1
2
3
4
5
6
7
<
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引用。
1
2
3
4
5
6
7
<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时,这个问题很容易就会产生。
0 0
- 限定$scope的范围
- maven 的范围 <scope>
- 限定TitleWindow的拖动范围
- 限定缩放范围的窗口
- easyui的datebox限定范围
- JAVABEAN 的scope作用范围
- maven的依赖范围scope
- maven scope编译的范围
- excel 如何限定用户的输入范围
- 【win32】限定值范围的语法
- jsp的四个scope范围大小
- 【spring框架】bean的生命范围(scope)
- maven中scope的依赖范围
- maven的依赖范围控制(scope)
- 限定移动范围--teacher
- 限定二维码扫描范围
- 判断某字符是否在限定的范围里
- Flex 4组件:限定搜索范围的Navbar,Vimeo样式
- 最长回文子串算法入门经典
- 回文数
- PHP中的超全局变量
- hdoj.1503 Advanced Fruits【最长公共子序列】 2015/04/15
- How should one read a book?
- 限定$scope的范围
- php中sql语句汇总
- 第四章 基于对象的编程风格(什么是this指针)
- zoj1383Binary Numbers
- NS2导入Eclipse过程
- CART Decision Tree and two pruning theory
- 网络编程UDP的一些基本操作应用
- 必须掌握的八个【cmd 命令行】
- 写了一个用于采集爱词霸单词Java代码