angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
来源:互联网 发布:淘宝匿名买家id提取器 编辑:程序博客网 时间:2024/05/21 07:07
在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:
mcolor:"red"
scope_3:
mcolor:"red"
由此我们可以得出以下结论:
- $compile(elem)(scope),这里的scope是指令的外围作用域。
- elem.scope()返回的scope是指令的外围作用域。
- elem.isolateScope()返回的才是指令的独立作用域。
- scope.$$childHead返回的也是指令的独立作用域。
阅读全文
0 0
- angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
- 链表中LinkList L与LinkList *L的区别以及(*L).elem,L.elem L->next,(*L)->next的区别
- angular中$scope.$apply和$scope.$digest的区别
- maven dependency中scope=compile 和 provided区别
- maven dependency中scope=compile 和 provided区别
- maven dependency中scope=compile 和 provided区别
- maven dependency中scope=compile 和 provided区别
- [codility]Perm-Missing-Elem
- Angualr指令中的scope
- scope
- Scope
- scope
- scope
- scope
- TypeError: elem.nodeName is undefined
- elem.style[attr]=value 点操作符和中括号操作符
- TypeError: elem is undefined var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase
- spring 中scope的singleton和prototype区别
- myeclipse2014运行maven项目没反应
- 读书:杜兰特的《哲学的故事》
- CAD图像打印成黑白色的步骤
- Lua 循环结构
- CMakeListx.txt编辑语法学习(一)
- angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
- java序列化
- 多态
- HDU6194-string string string
- nginx——高可用的负载均衡
- Jmeter解决响应码判断问题
- Logstash的性能测试 二
- 工厂模式
- Oracle在pl/sql中操作基本表 记录