angualr高級篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別

時間 2019-11-13

標籤 angualr 高級 elem.scope elem scope elem.isolatescope isolatescope compile 區別简体版

原文原文鏈接

在angular的使用過程當中咱們常常用$rootScope.$new()爲elem建立一個新的做用域scope，而後使用$compile(elem)(scope)編譯這個含有指令的元素。那麼這裏傳進去的scope究竟是哪裏的做用域？scope.$$childHead是什麼做用域？編譯好的elem.scope()返回的又是什麼做用域？elem.isolateScope()返回的是什麼做用域？知道這些是頗有必要的，特別是使用jasmine測試angular指令的時候。下面使用一個例子來驗證一下。javascript

index.htmlcss

<!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:
html