在angular的使用过程中我们经常用$rootScope.$new()为elem创建一个新的作用域scope，然后使用$compile(elem)(scope)编译这个含有指令的元素。那么这里传进去的scope到底是哪里的作用域？scope.$$childHead是什么作用域？编译好的elem.scope()返回的又是什么作用域？elem.isolateScope()返回的是什么作用域？知道这些是很有必要的，特别是使用jasmine测试angular指令的时候。下面使用一个例子来验证一下。

index.html

<!DOCTYPE html>

<html ng-app="myapp">

<head>

	<meta charset="utf-8">

	<title>angular test</title>

</head>

<body ng-controller="myCtrl">

</body>

<script src="./node_modules/angular/angular.js"></script>

<script src="./index.js"></script>

</html>

index.js

var app = angular.module('myapp',[]);

app.controller('myCtrl', function($compile, $rootScope){

	//创建一个新的作用域，并添加两个属性

	var scope_0 = $rootScope.$new();

	scope_0.color = "red";

	scope_0.name = "Jhon";

	//编译该指令并插入body中

	var elem = angular.element('<div mcolor="{{color}}">你好吗？</div>');

	$compile(elem)(scope_0);

	var body = document.querySelector('body');

	angular.element(body).append(elem)

	//获取这几个作用域

	var scope_1 = elem.scope();

	var scope_2 = elem.isolateScope();

	var scope_3 = scope_0.$$childHead;

	//并打印

	console.log("scope_0:", scope_0);

	console.log("scope_1:", scope_1);

	console.log("scope_2:", scope_2);

	console.log("scope_3:", scope_3);

});

app.directive('mcolor',function(){

	return {

		restrict: 'A',

		scope:{

			mcolor: '@'

		},

		link: function(scope, elem, attrs){

			elem.css('color', scope.mcolor);

		}

	}

});

执行后的结果是，界面显示了红色的“你好吗？”，当然这不是我们所关注的。下面我们来看一下打印的日志：

scope_0:

  1. color:"red"
  2. name:"Jhon"

scope_1:

  1. color:"red"
  2. name:"Jhon"

scope_2:

mcolor:"red"

scope_3:

mcolor:"red"

由此我们可以得出以下结论：

  1. $compile(elem)(scope),这里的scope是指令的外围作用域。
  2. elem.scope()返回的scope是指令的外围作用域。
  3. elem.isolateScope()返回的才是指令的独立作用域。
  4. scope.$$childHead返回的也是指令的独立作用域。

angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别的更多相关文章

  1. SpringBootTest单元测试实战、SpringBoot测试进阶高级篇之MockMvc讲解

    1.@SpringBootTest单元测试实战 简介:讲解SpringBoot的单元测试 1.引入相关依赖 <!--springboot程序测试依赖,如果是自动创建项目默认添加--> &l ...

  2. MyBatis高级篇之整合ehcache缓存框架

    MyBatis高级篇之整合ehcache缓存框架  2017-09-01  0 Comments  1,671 Views  0 Times 一.前言 MyBatis为我们提供了Cache接口,也提供 ...

  3. Vue2和Vue3技术整理3 - 高级篇

    3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...

  4. Vue2技术整理3 - 高级篇 - 更新完毕

    3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...

  5. Scala函数高级篇

    一.匿名函数 没有名字的函数就是匿名函数,格式:(x:Int)=>{函数体} x:表示输入参数类型:Int:表示输入参数类型:函数体:表示具体代码逻辑 传递匿名函数至简原则: 参数的类型可以省略 ...

  6. C#高级知识点&(ABP框架理论学习高级篇)——白金版

    前言摘要 很早以前就有要写ABP高级系列教程的计划了,但是迟迟到现在这个高级理论系列才和大家见面.其实这篇博客很早就着手写了,只是楼主一直写写停停.看看下图,就知道这篇博客的生产日期了,谁知它的出厂日 ...

  7. 【.net深呼吸】动态类型（高级篇）

    前面老周给大家介绍了动态类型使用的娱乐级别用法,其实,在很多情景下,娱乐级别的用法已经满足需求了. 如果,你想自己来控制动态类型的行为和数据的存取,那么,就可以考虑用今天所说的高大上技术了.比如,你希 ...

  8. 【转载】Spark性能优化指南——高级篇

    前言 数据倾斜调优 调优概述 数据倾斜发生时的现象 数据倾斜发生的原理 如何定位导致数据倾斜的代码 查看导致数据倾斜的key的数据分布情况 数据倾斜的解决方案 解决方案一:使用Hive ETL预处理数 ...

  9. ORM查询语言（OQL）简介--高级篇（续）：庐山真貌

    相关文章内容索引: ORM查询语言(OQL)简介--概念篇 ORM查询语言(OQL)简介--实例篇 ORM查询语言(OQL)简介--高级篇:脱胎换骨 ORM查询语言(OQL)简介--高级篇(续):庐山 ...

随机推荐

  1. CSS3的颜色渐变效果

    在 animate.css寻找自己想要的动态效果,看到标题Animate.css和按钮Animate it的颜色在逐渐变化,觉得蛮有趣的,把控制变化的相关代码扒了下来,自己分析实现一波. 一开始认为使 ...

  2. angular-bootstrap ui-date组件问题总结

    使用angular框架的时候,之前用的时间控件是引入My97DatePicker组件实现的,但是因为 1.My97DatePicker样式不太好看以及偶尔会出现底部被遮盖的情况.点击不可编辑input ...

  3. PHPFastCGI进程管理器PHP-FPM详解

    PHP-FPM是一个PHPFastCGI进程管理器,是只用于PHP的.      PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将它patch到你的PH ...

  4. 新旧apache HttpClient 获取httpClient方法

    在apache httpclient 4.3版本中对很多旧的类进行了deprecated标注,通常比较常用的就是下面两个类了. DefaultHttpClient -> CloseableHtt ...

  5. 【京东账户】——Mysql/PHP/Ajax爬坑之产品列表显示

    一.引言 实现京东的账户项目,功能模块之一,产品列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:产品表 添加多条记录 /**产 ...

  6. 关于DbContext能不能单次请求内唯一？DbContex需不需要主动释放？欢迎各路大侠来“参战”！

    基于前篇文章<HiBlogs>重写笔记[1]--从DbContext到依赖注入再到自动注入园友@Flaming丶淡蓝@ 吴瑞祥 提出了讨论和质疑,吓得我连夜查询资料(玩笑~). 本来文章的 ...

  7. C的函数指针与指针函数

    1.函数指针 指向函数的指针.本质是一个指针. 指针变量可以指向变量的地址.数组.字符串.动态分配地址,同时也可指向一个函数,每个函数在编译的时候,系统会分配给该函数一个入口地址,函数名表示这个入口地 ...

  8. Spring MVC中Filter Servlet Interceptor 执行顺序

    <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springfr ...

  9. 接口测试——httpclient介绍与请求方式详解

    httpClient工具介绍 HTTP协议可能是现在lntemet上使用得最多.最重要的协议了,越来越多的Java应用程序需要直接通过HTTP协议来访问网络资源.虽然在JDK的java.net包中已经 ...

  10. #pragma编译指令

    #pragma alignment#pragma anon_struct#pragma argsused#pragma checkoption#pragma codeseg#pragma commen ...