初学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 隔离作用域的更多相关文章

  1. angularjs学习第九天笔记(指令作用域【隔离作用域】研究)

    您好,昨天学习了指令作用域为布尔型的情况, 今天主要研究其指针作用域为{}的情况 1.当作用域scope为{}时,子作用域完全创建一个独立的作用域, 此时,子做预约和外部作用域完全不数据交互 但是,在 ...

  2. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  3. AngulaJs -- 隔离作用域

    具有隔离作用域的指令最主要的使用场景是创建可复用的组件 创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}.如果这样做了,指令的 模板就无法访问外部作用域了: <div ng-co ...

  4. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  5. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  6. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  7. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

  8. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  9. 理解angularjs的作用域

    <!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...

随机推荐

  1. 应用UUID简化设计

    应用UUID简化设计(金庆的专栏)UUID(Universally Unique Identifier) 保证每次生成的都是唯一的,不同机器生成UUID也能保证唯一.网游中使用UUID可以避免全局的I ...

  2. 华为解锁BL

    华为手机要怎么查看手机是否需要解锁呢?相信许多机油都不懂自己入手的手机是否需要解锁.而华为手机自华为C8812之后的高通手机均需要先解锁才能够尽兴刷机或获取Root权限的.那么下面我给大家分享一下华为 ...

  3. UNIX网络编程——分析一帧基于UDP的TFTP协议帧

    下图是UDP的段格式: 相比TCP段格式,UDP要简单得多,也没啥好说的,需要注意的是UDP数据长度指payload加上首部的长度. 下面分析一帧基于UDP的TFTP协议帧: 以太网首部 0000: ...

  4. UNIX环境高级编程——线程属性之并发度

    并发度控制着用户级线程可以映射的内核线程或进程的数目.如果操作系统的实现在内核级的线程和用户级的线程之间保持一对一的映射,那么改变并发度并不会有什么效果,因为所有的用户级线程都可能被调度到.但是,如果 ...

  5. 如何在Cocos2D 1.0 中掩饰一个精灵(二)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 让我们开始吧 打开Xcode,从New Project中选择co ...

  6. Uva - 1594 - Ducci Sequence

    水题,算出每次的结果,比较是否全0,循环1000次还不是全0则LOOP AC代码: #include <iostream> #include <cstdio> #include ...

  7. XML引入以及与html的区别

    1.1 引入 HTML: 负责网页的结构 CSS: 负责网页的样式(美观) Javascript: 负责在浏览器端与用户进行交互. 负责静态的网页制作的语言 HTML语言特点: 1)由标签组成. &l ...

  8. android开发之http协议

    http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web C ...

  9. OC语言(三)

    十九.一些规范 import系统自带的用尖括号<>来包含. 发现需求不清晰,一定要先搞明白才去做. 多文件开发,文件名和类名一致 命令行里的做法:(只是编译链接主文件,但是全部编译链接会出 ...

  10. how tomcat works 读书笔记(二)----------一个简单的servlet容器

    app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...