文档章节

Angular-限定$scope的范围

梅气灶
 梅气灶
发布于 2015/12/08 15:36
字数 871
阅读 178
收藏 3

        javascript基于原型的继承和面向对象中基于类的继承有那么些微妙的区别,这通常不会有什么大问题,但是这个文彪的区别在angular中使用$scope的时候会表现出来。在angular中,数据都有自己的作用域,在控制器中将数据存放在$scope上,在view中进行访问或者修改(仍然在该控制器中),而每个$scope都会继承父级的$scope,一直往上,知道最顶层的$rootScope($scope和传统的指令不同,$scope有一定的作用范围,即在自己所在的控制器范围内进行操作,并且只继承显式声明的属性)。

        javascript原型继承的特点使得在父类和子类中共享数据变的不那么重要,但是在angular中,由于限定了$scope的作用范围,一不小心,也会很容易误用父级$scope中的属性,这并不是我们想看到的!

        举一个很简单的例子,假设我们要在一个div中显示用户名,这个用户名在登录表单中进行输入,来看下简单的demo:

        根据demo可以看出,我们在父控制器设置了一个user,子控制器中继承父类的user,在text input 中设置了user的ng-model,尝试想一下,当我们在输入框中输入的时候,parentCtrl控制器和childCtrl控制器的内容哪个会被更新?parentCtrl或者是childCtrl?还是两个都会?

        如果你选择了childCtrl,那么你基本是已经理解了原型继承是如何进行工作的了,如果你还有其他的答案的话,同学,可能你还要多学习学习了。让我们来看看测试结果:

        当我们在检索值类型的时候,原型链是不会起作用的,所以我们在输入框输入内容的时候,只会更新当前所在的控制器中的user,如果我们想要parentCtrl中的user的话,那就说明势必要触发原型链的检索!那么用什么办法来解决呢?使用对象来解决(在javascript中,函数、数组、对象都是对象)。让我们再来写一个demo,不同的是,这次使用的是对象,而非值。

        那么这次在input中进行输入,结果会如何?

        这次,由于user是一个对象,因此原型链会起作用,parentCtrl和childCtrl中的内容都会被更新!

        好吧,我承认这是一个很作的例子,但是当你使用某些个指令去创建子$scope的时候,稍微不注意,这样的问题就会很容易产生(例如ngRepeat指令)!        

© 著作权归作者所有

共有 人打赏支持
梅气灶
粉丝 30
博文 15
码字总数 20372
作品 0
杭州
前端工程师
私信 提问
AngularJS入门(用ng-bind指令实现单向绑定)

不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多。 angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内...

foodon
2014/10/29
0
0
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
angular 调试时出现$http.get(...).success is not a function错误

我是angular 初学者,在调试时出现$http.get(...).success is not a function错误,我在网上找了一下,没有得到解决,求一下大神,帮我看一下出现了什么问题谢谢! 具体错误:TypeError: $h...

宸紫懿
2016/12/29
1K
0
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部