Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中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 class="lazy" data-src="./node_modules/angular/angular.js"></script><script class="lazy" data-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返回的也是指令的独立作用域。
看完了这篇文章，相信你对“Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
