ホームページ >ウェブフロントエンド >jsチュートリアル >Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明
Angular の elem.scope()、elem.isolateScope、$compile(elem)(scope) のスコープの違いに関する簡単な説明
- 青灯夜游転載
- 2021-05-21 10:34:161958ブラウズ
この記事では、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('myapp',[]);
app.controller('myCtrl', function($compile, $rootScope){
//创建一个新的作用域，并添加两个属性
var scope_0 = $rootScope.$new();
scope_0.color = "red";
scope_0.name = "Jhon";
//编译该指令并插入body中
var elem = angular.element('<p mcolor="{{color}}">你好吗？</p>');
$compile(elem)(scope_0);
var body = document.querySelector('body');
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('mcolor',function(){
return {
restrict: 'A',
scope:{
mcolor: '@'
},
link: function(scope, elem, attrs){
elem.css('color', 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 サイトの他の関連記事を参照してください。