首頁  >  文章  >  web前端  >  淺談Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別

淺談Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別

青灯夜游
青灯夜游轉載
2021-05-21 10:34:161904瀏覽

本篇文章跟大家介紹一下Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的差別。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

淺談Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別

【相關推薦:《angular教學》】

在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(&#39;myapp&#39;,[]);
app.controller(&#39;myCtrl&#39;, function($compile, $rootScope){
	//创建一个新的作用域,并添加两个属性
	var scope_0 = $rootScope.$new();
	scope_0.color = "red";
	scope_0.name = "Jhon";

	//编译该指令并插入body中
	var elem = angular.element(&#39;<p mcolor="{{color}}">你好吗?</p>&#39;);
	$compile(elem)(scope_0);
	var body = document.querySelector(&#39;body&#39;);
	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(&#39;mcolor&#39;,function(){
	return {
		restrict: &#39;A&#39;,
		scope:{
			mcolor: &#39;@&#39;
		},
		link: function(scope, elem, attrs){
			elem.css(&#39;color&#39;, 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的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除