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:/ ...
随机推荐
- Java进阶(三)Java安全通信:HTTPS与SSL
通过一个系统,接触到了Java安全机制,故作一小节,供朋友们参考学习. 1. HTTPS概念 1)简介 HTTPS(全称:Hypertext Transfer Protocol over Secure ...
- React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...
- 【Android 应用开发】 Fragment 详解
作者 : 韩曙亮 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/38064191 本博客代码地址 : -- 单一 Fragmen ...
- 简约才是王道? CardView 的使用
发现个好看的东东 CardView,他在support v7包中~~ 顾名思义就是卡片view,可以设置阴影,圆角,等等.. 样子是这样的: 或者你还可以放到listview里 是这样的: http: ...
- Linux 学习笔记_12_Windows与Linux文件共享服务_1.1_--Samba(下)Samba经典应用案例
五.[Samba应用案例二] 设置Samba共享目录/software,允许用户jack和mary可以通过Windows客户端访问,并具有读写权限. 1.创建目录/software,添加用户jack, ...
- ARM Linux内核Input输入子系统浅解
--以触摸屏驱动为例 第一章.了解linux input子系统 Linux输入设备总类繁杂,常见的包括有按键.键盘.触摸屏.鼠标.摇杆等等,他们本身就是字符设备,而linux内核将这些 ...
- Pixelmetrix :OTT Media Grinder (OTT TV 质量评价设备)
有关OTT TV 质量评价方法方面的研究少之又少.国内貌似还几乎没有相关的研究.不过在国外已经找到相关的产品了,翻译了一下产品手册的部分内容,很有参考价值,尤其是其提出的8个指标. 概述 OTT Me ...
- [MSSQL]SQL Server里面导出SQL脚本(表数据的insert语句)(转)
最近需要导出一个表的数据并生成insert语句,发现SQL Server的自带工具并米有此功能.BAIDU一下得到如下方法(亲测OK) 用这个存储过程可以实现:CREATE PROCEDURE dbo ...
- 《java入门第一季》之面向对象(static关键字内存图解)
- Oracle EBS 重新编译无效对象 invalid object
1. 查看数据库中的无效对象 check oracle object SQL> select count(*) from dba_objects where status= ...