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

index.html

  1. <!DOCTYPE html>
  2. <html ng-app="myapp">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>angular test</title>
  6. </head>
  7. <body ng-controller="myCtrl">
  8.  
  9. </body>
  10. <script src="./node_modules/angular/angular.js"></script>
  11. <script src="./index.js"></script>
  12. </html>

index.js

  1. var app = angular.module('myapp',[]);
  2. app.controller('myCtrl', function($compile, $rootScope){
  3. 	//创建一个新的作用域，并添加两个属性
  4. 	var scope_0 = $rootScope.$new();
  5. 	scope_0.color = "red";
  6. 	scope_0.name = "Jhon";
  7.  
  8. 	//编译该指令并插入body中
  9. 	var elem = angular.element('<div mcolor="{{color}}">你好吗？</div>');
  10. 	$compile(elem)(scope_0);
  11. 	var body = document.querySelector('body');
  12. 	angular.element(body).append(elem)
  13.  
  14. 	//获取这几个作用域
  15. 	var scope_1 = elem.scope();
  16. 	var scope_2 = elem.isolateScope();
  17. 	var scope_3 = scope_0.$$childHead;
  18. 	//并打印
  19. 	console.log("scope_0:", scope_0);
  20. 	console.log("scope_1:", scope_1);
  21. 	console.log("scope_2:", scope_2);
  22. 	console.log("scope_3:", scope_3);
  23. });
  24. app.directive('mcolor',function(){
  25. 	return {
  26. 		restrict: 'A',
  27. 		scope:{
  28. 			mcolor: '@'
  29. 		},
  30. 		link: function(scope, elem, attrs){
  31. 			elem.css('color', scope.mcolor);
  32. 		}
  33. 	}
  34. });

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

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. scoke摘要

      登录|注册     关闭 永不磨灭的意志 /* ----------------500G的电影拷到了U盘上,U盘的重量会不会增加?----------------------*/       目录 ...

  2. NavigationController的返回按钮自定义

    假设需求时这样: NavigationController下有2个视图,从A视图会Push到B视图,默认情况下,当显示视图B时,视图B的导航bar上会出现返回按钮,按钮标题文字默认为A视图的title ...

  3. 第1回-使用ThinkPHP的3.1.3版本轻松建网站

    使用ThinkPHP的3.1.3版本轻松建网站 首先,从ThinkPHP官网下载一个ThinkPHP3.1.3版本框架包. 其次,取出ThinkPHP3.1.3包中的核心部分,部署你的服务器项目下. ...

  4. Quartz学习——Spring和Quartz集成详解（三）

    Spring是一个很优秀的框架,它无缝的集成了Quartz,简单方便的让企业级应用更好的使用Quartz进行任务的调度.下面就对Spring集成Quartz进行简单的介绍和示例讲解!和上一节 Quar ...

  5. [VirtualBox] 1、NAT模式下端口映射

    1.VirtualBox中有4中网络连接方式 VirtualBox中有4中网络连接方式:NAT.Bridged Adapter.Internal.Host-only Adapter,VMWare中有三 ...

  6. php soap实现WebService接口

    nusoap是php写的一个功能文件,下载地址:http://pan.baidu.com/s/1i3mUQJr 一.不使用wsdl服务端 server.php <?php //包函nusoap. ...

  7. sql2008 发送邮件

    --"管理"-"数据库邮件"-右键"配置数据库右键" Exec msdb.dbo.sp_send_dbmail @profile_name= ...

  8. ICommand.CanExecuteChanged事件订阅对象的变化

    public class DelegateCommand : ICommand { Func<object, bool> canExecute; Action<object> ...

  9. BAT级别分类

    阿里的级别:P为技术岗,M为管理岗.P7是技术专家级别. 阿里级别对应薪资:  百度使用的T系列及对应薪资: 腾讯的T系列及对应薪资:

  10. 微信小程序- 生成二维码

    wx.request({ // 获取token url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential', ...