AngularJs 隔离作用域
初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此。
里面讲到了自定义指令的scope参数的值有三种,true,false,{}。我按照例子将scope的值运行试验了一把,利用Chrome插件batarang分析了一波,谈谈自己的理解,有不到的地方望各位海涵。
首先,隔离作用域与继承作用域(子作用域)是不同的,隔离作用域同当前DOM的作用域是完全隔离开的。NG中的$scope是Scope类的实例,是模板的域模型,每个Scope都对应着一个域模型,我这样理解也就是NG根据DOM树和其NG指令来驱动生成一个层级作用域(这也是一个树结构)。
一直很疑惑隔离作用域与继承作用域的关系?。directive()方法返回这样一个对象,用来定义和配置指令所需的方法和属性,来控制如何渲染HTML模板,隔离作用域对象(scope)作为其中的一个属性返回,这对象只在指令的方法中或者指令的模板字符串中使用。
当指令的scope属性为false:
由上图可知,当scope为false,AngularJs并不会该指令生成的DOM节点生成新的Angular子作用域($scope),而是与父作用域共享,因此在模板中引用的模型也就是MyController父作用域中(当前作用域)的模型。
当指令的scope属性为true:
当初始化后,AngularJs为该指令创建新的子级作用域,其父作用域为MyController所在的作用域,当前的作用域(新建的子级作用域)模型为空,因此模板引用name,age模型会在父作用域进行搜索(沿着原型链进行向上)。然而当在当前作用域进行赋值(写)操作的时候就会在当前作用域创建新的模型(变量)。在input组件中输入的时候,就是做了这样的工作,name="白守敬",因此会在指令所在的当前作用域下会新增了name模型,而不是覆写了父作用域,类似于JavaScript的原型继承。
当指令的scope属性为{}:
AngularJs也会该指令创建新的子级作用域,与情形二的区别在于其所在的作用域保存一份对父级作用域某些模型的或者DOM属性值的副本,scope在其中就扮演着这样的角色,@ 是将本地作用域同 DOM 属性的值进行绑定,= 将本地作用域同父级作用域上的属性进行绑定。因此在当前作用域,input组件对name模型赋值操作相当于修改了当前作用域name模型的值,对name,age模型的修改不会影响到父级作用域。
总结一下,首先会AngularJs会为其指令创建新的子级作用域,隔离作用域大概是扮演着这样的角色,隔离作用域scope会为子级(所在当前)作用域传递关键字参数。
AngularJs 隔离作用域的更多相关文章
- angularjs学习第九天笔记(指令作用域【隔离作用域】研究)
您好,昨天学习了指令作用域为布尔型的情况, 今天主要研究其指针作用域为{}的情况 1.当作用域scope为{}时,子作用域完全创建一个独立的作用域, 此时,子做预约和外部作用域完全不数据交互 但是,在 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- AngulaJs -- 隔离作用域
具有隔离作用域的指令最主要的使用场景是创建可复用的组件 创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}.如果这样做了,指令的 模板就无法访问外部作用域了: <div ng-co ...
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- 理解AngularJS的作用域Scope
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...
- AngularJS学习之旅—AngularJS Scope作用域(五)
1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...
- angularJs的作用域和依赖注入
一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找 &rootScope这是全局作用域 <!DOCTYPE HTML&g ...
- AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...
- 理解angularjs的作用域
<!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...
随机推荐
- UE4利用Save Game创建全局变量
因为盲目的做了一个UE4的项目,没有用到UE4的无缝加载,我只能在一个个关卡中手动切换,然后每次的数据都会重置,这对于项目来说,造成了体验感的极度下降. 然而我查了一下怎样在UE4中创建全局变量,找到 ...
- Android进阶(二十四)Android UI---界面开发推荐颜色
Android UI---界面开发推荐颜色 在Android开发过程中,总要给app添加一些背景,个人认为使用纯色调便可以达到优雅的视觉效果. 补充一些常用的颜色值:colors.xml < ...
- SHA算法
安全Hash函数(SHA)是使用最广泛的Hash函数.由于其他曾被广泛使用的Hash函数都被发现存在安全隐患,从2005年至今,SHA或许是仅存的Hash算法标准. SHA发展史 SHA由美国标准与技 ...
- Linux根文件系统介绍
系统 根文件系统首先是一种文件系统,但是相对于普通的文件系统,它的特殊之处在于,它是内核启动时所mount的第一个文件系统,内核代码映像文件保存在根文件系统中,而系统引导启动程序会在根文件系统挂载之后 ...
- spring与mybatis(oracle)整合
今天闲着无聊把项目拆解开,抽出了spring与mybatis部分.做了个demo,希望对初学者有些帮助,另外整个demo是从项目中完整剥离下来的,里面的架构大家也可以参考一下. 先是完整的项目图 首先 ...
- MinerUrl.java 解析页面后存储URL类
MinerUrl.java 解析页面后存储URL类 package com.iteye.injavawetrust.miner; /** * 解析页面后存储URL类 * @author InJavaW ...
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- sublime text (ST)一篇通(安装、配置、扩展、使用)
sublime编辑器,功能插件多,可以扩展为IDE------------------------------------------- 1.安装 官网下载 http://www.sublimete ...
- 64位ubuntu14.04配置adb后提示没有那个文件或目录
1.配置完adb环境变量后在终端输入adb: ameyume@ameyume-HP-450-Notebook-PC:~$ adb /home/ameyume/adt-bundle-linux-x86_ ...
- Vim/Vi实用技巧(第二版)
Vim/Vi实用技巧 1.导入文件 :r [文件名] #导入到当前编辑的文件中 如 :r /etc/inittab 文件上部为/etc/services文件,下部为/etc/inittab文件 2.执 ...