文档章节

Angular-限定$scope的范围

梅气灶
 梅气灶
发布于 2015/12/08 15:36
字数 871
阅读 176
收藏 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
Angular.js 相关记录

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

彭博
2014/04/25
0
2
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
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
Angular 中得 scope 作用域梳理

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

顽Shi
2014/09/21
0
2

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装最新版WPS

1.手动卸载libreoffice:sudo apt-get remove --purge libreoffice* 2.官网下载WPS和字体: WPS:http://wps-community.org/download.html 字体:http://wps-community.org/download.html?vl......

AI_SKI
43分钟前
3
0
数据结构(算法)-图(深度优先搜索 DFS)

#include <iostream>using namespace std;#define MaxVex 30typedef char VertexType;typedef struct vexNode adjList[MaxVex];struct edgeNode{int adjvex;//邻接点......

ashuo
48分钟前
0
0
1024 搞事倒计时!距程序员节还有 2 天!

详情请关注微信公众号:七牛云

七牛云
48分钟前
0
0
Java泛型方法

1. 定义泛型方法 (1) 如果你定义了一个泛型(类、接口),那么Java规定,你不能在所有的静态方法、静态初块等所有静态内容中使用泛型的类型参数。例如: public class A<T> { public st...

两广总督bogang
49分钟前
2
0
如何解决JavaScript中0.1+0.2不等于0.3

console.log(0.1+0.2===0.3)// true or false??   在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当...

peakedness丶
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部