suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Diskussion über die Unterschiede zwischen Bereichen in elem.scope(), elem.isolateScope und $compile(elem)(scope) in Angular

Eine kurze Diskussion über die Unterschiede zwischen Bereichen in elem.scope(), elem.isolateScope und $compile(elem)(scope) in Angular

青灯夜游
青灯夜游nach vorne
2021-05-21 10:34:161958Durchsuche

In diesem Artikel werden Ihnen die Unterschiede zwischen elem.scope(), elem.isolateScope und $compile(elem)(scope) in Angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über die Unterschiede zwischen Bereichen in elem.scope(), elem.isolateScope und $compile(elem)(scope) in Angular

【Verwandte Empfehlung: „Angular-Tutorial“】

Bei der Verwendung von Angular verwenden wir häufig $rootScope.$new(), um einen neuen Bereich für elem zu erstellen, und verwenden dann $compile(elem )(scope) kompiliert das Element, das die Direktive enthält. Was ist also der Umfang des hier übergebenen Bereichs? Was ist der Umfang von Scope.$$childHead? Welchen Bereich gibt das kompilierte elem.scope() zurück? Welchen Bereich gibt elem.isolateScope() zurück? Das muss man wissen, insbesondere wenn man Jasmin zum Testen von Winkelanweisungen verwendet. Lassen Sie uns dies anhand eines Beispiels überprüfen.

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);
		}
	}
});

Das Ergebnis nach der Ausführung ist, dass auf der Schnittstelle ein rotes „Wie geht es dir?“ angezeigt wird. Das ist natürlich nicht das, worüber wir uns Sorgen machen. Werfen wir einen Blick auf das gedruckte Protokoll: 

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

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

scope_2:
  mcolor:"red"

scope_3: 
  mcolor:"red"

Daraus können wir folgende Schlussfolgerungen ziehen:

  • $compile(elem)(scope), der Umfang ist hier der periphere Umfang der Anweisung .

  • elem.scope() Der zurückgegebene Bereich ist der äußere Bereich der Anweisung.

  • elem.isolateScope() gibt den unabhängigen Umfang der Anweisung zurück.

  • scope.$$childHead gibt außerdem den unabhängigen Umfang der Anweisung zurück.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierunterricht! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Unterschiede zwischen Bereichen in elem.scope(), elem.isolateScope und $compile(elem)(scope) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

angular JS 作用域
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So implementieren Sie eine einfache GET-Anfrage in NodejsNächster Artikel：So implementieren Sie eine einfache GET-Anfrage in Nodejs

In Verbindung stehende Artikel

Mehr sehen