angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别

时间 2019-11-13

标签 angualr 高级 elem.scope elem scope elem.isolatescope isolatescope compile 区别繁體版

原文原文链接

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

index.htmlcss

<!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:
html

color:"red"
name:"Jhon"

scope_1:

color:"red"
name:"Jhon"

scope_2:

mcolor:"red"java

scope_3:node

mcolor:"red"markdown

由此咱们能够得出如下结论：app

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