初学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. Unity插件 - MeshEditor(三) 面片破碎&网格破碎

    网上的unity破碎插件很多,不过想着可以以自己的方式实现也不失为一种乐趣,虽然整体的表现性上显得有些差,但也并不会影响最终的效果,接下来我大致讲解一下破碎一个物体的流程,因为用到了协程计算碎片的原因 ...

  2. Ubuntu文件中文乱码

    如图,该文件在gedit打开中文显示正常 在命令行中用vim打开,显示内容如下: 使用命令进行编码转换 iconv -f gbk -t utf8 ./SogouQ.mini > ./sougou ...

  3. 最近在线笔试的一些感想和总结,阿里巴巴,腾讯,百度,360。c++研发,机器学习等岗位

    持续更新中... 1.编程界牛人太多了,还是要好好a题,好好弄清楚基础算法,并且用代码实现 2.c/c++方向其实来回来去那么几道题,做好了记到脑子里. 下面就是我打算把不会的,不清楚的都贴上来然后好 ...

  4. 分布式进阶(二)Ubuntu 14.04下安装Dockr图文教程(二)

    4.1 构建我们自己的映像 构建Docker映像有两种方法: •通过docker commit(提交)命令 •通过docker build(构建)命令以及Docker文件(Dockerfile) 目前 ...

  5. xml作用以及语法

    2 XML作用 2.1 描述带关系的数据(软件的配置文件) web服务器(PC): 学生管理系统 -> 添加学生功能 -> 添加学生页面 -> name=eric&email ...

  6. Chipmunk碰撞形状:cpShape

    目前有3种碰撞类型: 圆(Circles):最快并且最简单的碰撞形状 线段(Line segment):主要用于静态形状.可以表示斜线(Can be beveled in order to give ...

  7. 使用OC和Swift两种语言写一个发射烟花的小项目

    OC与Swift两种实现方式基本上区别不大,主要是在一些对象或方法的调用方式不同,附带源码. OC代码样式: self.view.backgroundColor = [UIColor blackCol ...

  8. 016-类与对象-OC笔记

    学习目标 1.[理解]对象在内存中的存储 2.[理解]nil和NULL 3.[了解]#pragma mark分组导航标记 4.[理解]方法与函数 5.[掌握]多文件开发 6.[掌握]对象和方法 7.[ ...

  9. (五)超级猜图Demo引出的细节

    第一部分: 1.按钮的细节,设置背景和前景图片后,要使得背景显示出来,可以设置内边距,影响内部内容. 显示 图片+文字,用button更简单. 问题是,如果不想按钮被点击,在属性面板取消勾选User ...

  10. Ubuntu下编译SHTOOLS

    SHTOOLS是使用Fortran语言写的一个专门用于处理球谐函数的一个开源库,更多的介绍请猛戳这里,关于这个库的安装和使用,都在官网上有详细的说明,虽然很详细,但是编译的时候还是比较费劲,下面将我在 ...