Une brève discussion sur les différences entre les scopes dans elem.scope(), elem.isolateScope et $compile(elem)(scope) dans Angular-js tutoriel-php.cn

Une brève discussion sur les différences entre les scopes dans elem.scope(), elem.isolateScope et $compile(elem)(scope) dans Angular

青灯夜游

Libérer： 2021-05-21 10:34:16

avant

1919 Les gens l'ont consulté

Cet article vous présentera les différences entre elem.scope(), elem.isolateScope et $compile(elem)(scope) dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur les différences entre les scopes dans elem.scope(), elem.isolateScope et $compile(elem)(scope) dans Angular

[Recommandation associée : "Tutoriel angulaire"]

Dans le processus d'utilisation d'angular, nous utilisons souvent $rootScope.$ new () Créez une nouvelle portée pour elem, puis utilisez $compile(elem)(scope) pour compiler l'élément contenant la directive. Alors, quelle est la portée de la portée transmise ici ? Quelle est la portée de scope.$$childHead ? Quelle portée le elem.scope() compilé renvoie-t-il ? Quelle portée renvoie elem.isolateScope() ? Il est nécessaire de le savoir, notamment lorsqu'on utilise du jasmin pour tester des instructions angulaires. Utilisons un exemple pour le vérifier.

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>

Copier après la connexion

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

Copier après la connexion

Le résultat après exécution est que l'interface affiche un "Comment vas-tu ? rouge", Bien entendu, ce n’est pas ce qui nous préoccupe. Jetons un coup d'œil au journal imprimé :

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

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

scope_2:
  mcolor:"red"

scope_3: 
  mcolor:"red"

Copier après la connexion

De là, nous pouvons tirer les conclusions suivantes :

$compile(elem)(scope), la portée ici est la portée extérieure de l'instruction.
La portée renvoyée par elem.scope() est la portée externe de l'instruction.
elem.isolateScope() renvoie la portée indépendante de l'instruction.
scope.$$childHead renvoie également la portée indépendante de la directive.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!