Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别有哪些

小编给大家分享一下Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

专注于为中小企业提供成都网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业寻乌免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

index.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('你好吗？
');
	$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返回的也是指令的独立作用域。

看完了这篇文章，相信你对“Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！