在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返回的也是指令的独立作用域。