溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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返回的也是指令的獨立作用域。
看完了這篇文章，相信你對“Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別有哪些”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
