淺談Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的區別-js教程-PHP中文網

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

青灯夜游

發布： 2021-05-21 10:34:16

轉載

1912 人瀏覽過

本篇文章跟大家介紹一下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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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