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:/ ...
随机推荐
- Unity UGUI基础之Text
Text作为UGUI最基础的控件以及最常用的控件,它在项目中的应用绝对可以算是最多的,任何一个UI界面可以说都离不开它,它的基本属性如下: 一.rect transform组件: rect trans ...
- ROS_Kinetic_17 使用V-Rep3.3.1(vrep_ros_bridge)
ROS_Kinetic_17 使用V-Rep3.3.1(vrep_ros_bridge) https://github.com/lagadic/vrep_ros_bridge v-rep也有官网也有教 ...
- PA 项目关联项目经理
---- 项目关联项目经理 DECLARE p_project_id NUMBER := 155233; l_project_role_id NUMBER := ''; p_employee_id N ...
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(十四)
我们首先必须将Level中所有机器人保存在某个数组里,因为该数组会在不同地方被访问,我们将其放在LevelRestrict类中,按道理应该放到GameState类中,这里从简. 打开LevelRest ...
- 【leetcode81】Product of Array Except Self
题目描述: 给定一个长度为n的整数数组Array[],输出一个等长的数组result[],这个输出数组,对应位置i是除了Array[i]之外,其他的所有元素的乘积 例如: given [1,2,3,4 ...
- Linux/Android多点触摸协议
链接点击打开链接 关于Linux多点触摸协议大家可以参考kernel中的文档:https://www.kernel.org/doc/Documentation/input/multi-touch-pr ...
- MySql my.ini 中文详细说明
[mysqld] port = 3306 socket = /tmp/mysql.sock # 设置mysql的安装目录 basedir=F:\\Hzq Soft\ ...
- C++对象模型(二):The Semantics of Copy Constructors(拷贝构造函数之编译背后的行为)
本文是 Inside The C++ Object Model's Chapter 2 的部分读书笔记. 有三种情况,需要拷贝构造函数: 1)object直接为另外一个object的初始值 2)ob ...
- css3的样式讲解-css学习之旅(3)
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
- Java 继承Thread类和实现Runnable接口的区别
ava中线程的创建有两种方式: 1. 通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中 2. 通过实现Runnable接口,实例化Thread类 在实际应用中,我 ...