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

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

青灯夜游

Freigeben： 2021-05-21 10:34:16

nach vorne

1956 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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"

Nach dem Login kopieren

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!