浅谈Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
站长图库向大家介绍了Angular,scope的区别等相关知识,希望对您有所帮助
本篇文章给大家介绍一下Angular中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('<p mcolor="{{color}}">你好吗？</p>'); $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返回的也是指令的独立作用域。