angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
在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:
- color:"red"
- name:"Jhon"
scope_1:
- color:"red"
- name:"Jhon"
scope_2:
mcolor:"red"
scope_3:
mcolor:"red"
由此我们可以得出以下结论：
- $compile(elem)(scope),这里的scope是指令的外围作用域。
- elem.scope()返回的scope是指令的外围作用域。
- elem.isolateScope()返回的才是指令的独立作用域。
- scope.$$childHead返回的也是指令的独立作用域。
angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别的更多相关文章
- SpringBootTest单元测试实战、SpringBoot测试进阶高级篇之MockMvc讲解
1.@SpringBootTest单元测试实战 简介:讲解SpringBoot的单元测试 1.引入相关依赖 <!--springboot程序测试依赖,如果是自动创建项目默认添加--> &l ...
- MyBatis高级篇之整合ehcache缓存框架
MyBatis高级篇之整合ehcache缓存框架 2017-09-01 0 Comments 1,671 Views 0 Times 一.前言 MyBatis为我们提供了Cache接口,也提供 ...
- Vue2和Vue3技术整理3 - 高级篇
3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...
- Vue2技术整理3 - 高级篇 - 更新完毕
3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...
- Scala函数高级篇
一.匿名函数 没有名字的函数就是匿名函数,格式:(x:Int)=>{函数体} x:表示输入参数类型:Int:表示输入参数类型:函数体:表示具体代码逻辑 传递匿名函数至简原则: 参数的类型可以省略 ...
- C#高级知识点&(ABP框架理论学习高级篇)——白金版
前言摘要 很早以前就有要写ABP高级系列教程的计划了,但是迟迟到现在这个高级理论系列才和大家见面.其实这篇博客很早就着手写了,只是楼主一直写写停停.看看下图,就知道这篇博客的生产日期了,谁知它的出厂日 ...
- 【.net深呼吸】动态类型（高级篇）
前面老周给大家介绍了动态类型使用的娱乐级别用法,其实,在很多情景下,娱乐级别的用法已经满足需求了. 如果,你想自己来控制动态类型的行为和数据的存取,那么,就可以考虑用今天所说的高大上技术了.比如,你希 ...
- 【转载】Spark性能优化指南——高级篇
前言 数据倾斜调优 调优概述 数据倾斜发生时的现象 数据倾斜发生的原理 如何定位导致数据倾斜的代码 查看导致数据倾斜的key的数据分布情况 数据倾斜的解决方案 解决方案一:使用Hive ETL预处理数 ...
- ORM查询语言（OQL）简介--高级篇（续）：庐山真貌
相关文章内容索引: ORM查询语言(OQL)简介--概念篇 ORM查询语言(OQL)简介--实例篇 ORM查询语言(OQL)简介--高级篇:脱胎换骨 ORM查询语言(OQL)简介--高级篇(续):庐山 ...
随机推荐
- Struts2-在js中使用struts2标签
1, 支行是下拉列表,自助银行也是下拉列表,它们是级联关系; <tr> <th width="17%"><span>*</span> ...
- [python学习笔记] 数据类型与语法
数据类型 数值型 int 整形 没有long类型,可以代表任意大小的整数. type(1) -> int float 浮点数 也没有double类型 type(1.2) -> float ...
- ng-transclude
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C++格式化输出的好东西
s = FormatFloat("0.######", d); 最多保留6位s = FormatFloat("0.000000", d); 始终保留6位s = ...
- Muddy Fields
Muddy Fields Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submi ...
- Array Partition I
Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...
- php中常用的字符串长度函数strlen()与mb_strlen()实例解释
int strlen ( string $string ) int strlen ( string $string ) 获取给定字符串的[字节]长度 成功则返回字符串$string的长度,如果$s ...
- .net通用防SQL注入漏洞程序(Global.asax方式)
原理很简单:使用Global.asax中的Application_BeginRequest(object sender, EventArgs e)事件,实现表单或URL提交数据的获取,然后通过SQLI ...
- Centos7安装Percona5.7
OS: Centos7.0 DB: Percona5.7 1. 通过yum安装 ## 删除之前的mysql数据库, 我用的是centos7.再安装虚拟机的时候,预装了很多软件.所以mysql和mari ...
- sql server作业实现数据同步
作业介绍 SQL SERVER的作业是一系列由SQL SERVER代理按顺序执行的指定操作.作业可以执行一系列活动,包括运行Transact-SQL脚本.命令行应用程序.Microsoft Acti ...