angualr高階篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別
阿新 • • 發佈：2019-02-19
在angular的使用過程中我們經常用$rootScope.$new()為elem建立一個新的作用域scope，然後使用$compile(elem)(scope)編譯這個含有指令的元素。那麼這裡傳進去的scope到底是哪裡的作用域？scope.$$childHead是什麼作用域？編譯好的elem.scope()返回的又是什麼作用域？elem.isolateScope()返回的是什麼作用域？知道這些是很有必要的，特別是使用jasmine測試angular指令的時候。下面使用一個例子來驗證一下。
index.html
index.js<!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>
執行後的結果是，介面顯示了紅色的“你好嗎？”，當然這不是我們所關注的。下面我們來看一下列印的日誌：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返回的也是指令的獨立作用域。