Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明-jsチュートリアル-php.cn

Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明

青灯夜游

リリース： 2021-05-21 10:34:16

転載

1919 人が閲覧しました

この記事では、Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明

[関連する推奨事項: "angular チュートリアル "]

Angular を使用するプロセスでは、$rootScope.$ をよく使用します。 new () elem の新しいスコープscopeを作成し、$compile(elem)(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);
		}
	}
});

ログイン後にコピー

実行後の結果は、インターフェイスに赤色の「How are you?」と表示されます。もちろん、これは私たちが懸念していることではありません。出力されたログを見てみましょう:

scope_0: 
  color:"red"
  name:"Jhon"

scope_1:
  color:"red"
  name:"Jhon"

scope_2:
  mcolor:"red"

scope_3: 
  mcolor:"red"

ログイン後にコピー

これから、次の結論を導き出すことができます:

$compile(elem)(scope)、ここでのスコープは命令の周辺スコープです。
elem.scope() によって返されるスコープは、命令の外側のスコープです。
elem.isolateScope() は、命令の独立したスコープを返します。
scope.$$childHead はディレクティブの独立したスコープを返します。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。！

以上がAngular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。