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

앞으로

1954명이 탐색했습니다.

이 글에서는 Angular에서 elem.scope(), elem.isolateScope 및 $compile(elem)(scope)의 차이점을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 elem.scope(), elem.isolateScope 및 $compile(elem)(scope) 범위 간의 차이점에 대한 간략한 설명

【관련 추천: "angular tutorial"】

Angular를 사용하는 과정에서 $rootScope.$new()를 사용하여 elem에 대한 새 범위를 만든 다음 $compile(elem)을 사용하는 경우가 많습니다. )(scope)는 지시어가 포함된 요소를 컴파일합니다. 그렇다면 여기에 전달된 범위의 범위는 무엇입니까? scope.$$childHead의 범위는 무엇입니까? 컴파일된 elem.scope()는 어떤 범위를 반환합니까? elem.isolateScope()는 어떤 범위를 반환합니까? 특히 Jasmine을 사용하여 각도 명령을 테스트할 때 이를 알아야 합니다. 이를 확인하기 위해 예제를 사용해보자.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!