初学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. J2EE进阶(十二)SSH框架整合常见问题汇总(三)

    在挂失用户时,发现userid值为空,但是在前台输入处理账号22时,通过后台输出可以看出,后台根据前端输入在数据库中查询到结果对象并输出该对象的userid,而且Guashi对象也获取到了其值. 解决 ...

  2. Torch的安装和学习

    Long long ago, 就已经安装好Torch,这里再记录一下.Torch是Facebook开发的用于AI的科学计算框架,可广泛运用于机器学习的很多算法.相比Caffe,其接口运用更加方便,使用 ...

  3. Chipmunk僵尸物理对象的出现和解决(八)

    如何解决? 等到碰撞方法返回后在调用Star类方法.碰撞方法在物理引擎的一帧内应该会处理完成,在下一帧里碰撞回调已经结束.所以我们将Star类方法的调用放到下一帧里执行即可,代码如下: //... @ ...

  4. 认证模式之Basic模式

    HTTP协议规范中有两种认证方式,一种是Basic认证,另外一种是Digest认证,这两种方式都属于无状态认证方式,所谓无状态即服务端都不会在会话中记录相关信息,客户端每次访问都需要将用户名和密码放置 ...

  5. 自定义gradle的property

    在android studio上运行项目,gradle的配置是必不可少的,但是随着项目的逐渐成长,迎面而来的就是.各种依赖包的添加,数不胜数的签名,渠道包等,整个gradle变得很乱,这样其实我们可以 ...

  6. 序列化与反序列化中serialVersionUID的作用(通俗易懂)

    serialVersionUID:字面意思上是序列化的版本号,这个在刚刚接触java编程时,学序列化大家一般都不会注意到,在你一个类序列化后除非你强制去掉了myeclipse中warning的功能,在 ...

  7. (十二)UITableView的基本使用

    UITableView之所以支持滚动,是因为继承自UIScrollView.默认是垂直滚动,性能极佳. UITableView的两种样式: 1.UITableViewStylePlain       ...

  8. android 面试之listview

    ListView优化一直是一个老生常谈的问题,不管是面试还是平常的开发中,ListView永远不会被忽略掉,那么这篇文章我们来看看如何最大化的优化ListView的性能.· 1.在adapter中的g ...

  9. 从头到尾解析Hash表算法

    via:点击打开链接 十一.从头到尾解析Hash 表算法 作者:July.wuliming.pkuoliver   出处:http://blog.csdn.net/v_JULY_v.   说明:本文分 ...

  10. MTK6577+Android之Camera驱动

    MTK6577+Android之Camera驱动 <MTK安卓平台的Camera效果在线调试> 1.     Camera拍照相关概念 1.1  ISP isp--(Image Signa ...