AngularJSのスコープとrootScope
以前の記事では、AngularJSのMVC構造を一時的に理解しました。
- 表示：HTML表示データ
- モデル：現在のビューで機能するデータ
- コントローラー：angularJS関数で記述された論理フローで、データの追加、編集、削除に使用されます
$ scopeは、コントローラーとアプリケーションのビューの間でデータを通信するためのオブジェクト（オブジェクト）です。$ scope変数が変更されると、コントローラーとビューのデータが更新され、ブリッジとして理解できます。これは式の形式で行われます。つまり、仕様に従って宣言されるモデルでは、スコープオブジェクトが対応するアクション（関数）またはデータを渡し、このオブジェクトを介してイベントを渡すことができます。
スコープは、今日のテンプレートエンジンと同じ式を提供します。たとえば、ユーザー名を表示するには、{{username}}として宣言し、コントローラーでは、$ scope.username='toanngo92'オブジェクトを割り当てる必要があります。これにはキーが必要です。ユーザー名を指定し、それをビュー{{username}}に割り当てます。
Mục lục
$scopeのスコープ
AngularJSアプリケーションでは、多くのコントローラー、多くの異なる$scopeを使用できます。以下の例に戻ります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examController"> <div ng-controller="headerController"> {{name}} - {{data}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examController', []); app.controller('headerController', function($scope){ $scope.name = "This is header"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope){ $scope.name = "This is footer"; }); </script> </body> </html>対応するコントローラーにリンクされたビューでは、{{data}}値が異なりますが、コントローラーごとに、各コントローラーの変数のデータプロパティが異なります。これは、$scope変数のスコープが対応するコントローラーのみにあることを証明します。
$rootScopeと$scopeの階層
例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="angular.min.js"></script> <!-- <script src="angular-route.min.js"></script> --> </head> <body ng-app="toanApp"> <div >Data rootscope: {{name}}</div> <div ng-controller="indexController"> <input ng-model="name" value=""/> <p> Data scope {{name}}</p> <button ng-click="changename()" >click</button> </div> <script> var app = angular.module("toanApp",[]); app.run(function($rootScope){ $rootScope.name = "root scope"; }); app.controller( "indexController", function($scope){ // console.log(languages); $scope.name = "controller scope"; $scope.changename = function(e){ $scope.name = "test"; } } ); </script> </body> </html>印刷時の結果、および入力との対話
上記の例では、divを使用してモデル名をビューに呼び出したことがわかりますが、このモデルはどのコントローラーにも属していません。スクリプトレイヤーの下で、 app.run（）メソッドを使用して初期化したことを理解しています。 nameという名前のグローバルモデルであるため、どのコントローラーにも含まれていなくても、変数名を表すことができます。 indexController内のdiv構造のモデル名については、データを更新すると、コントローラーのモデルが変更されますが、外部モデルとは関係ありません。2つのモデル名は、同じ名前であっても$scopeと$rootScopeにあります。 、それらは本質的に関連していません
例2 ：
次に、AngularJSコードの構文を次のように少し変更します。
この例の主な違いは、最初のJSコントローラーには$ rootScopeパラメーターがあり、2番目のコントローラーは何も処理しないことです。実行すると、次のインターフェイスが表示されます。
したがって、明らかに上記のコードは両方のコントローラーの$ scopeに値を渡しませんが、ビューにはまだ値がありますか？これは、$rootScope変数が原因です。これは、アプリケーションが実行されると、自動的に作成される$ rootScopeがあり、$ rootScopeが最高レベルであるため、その中のすべての$ scopeをカバーすることを意味します。これは、コントローラーのスコープにのみ影響する$scopeと同じではありません。 。
以下の例を検討してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examRootScope"> <div ng-controller="headerController"> {{name}} - {{data}} {{data_global}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examRootScope', []); app.controller('headerController', function($scope,$rootScope){ $scope.name = "This is header"; $scope.data= "header data scope"; $rootScope.data = "header data root scope"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope,$rootScope){ $scope.name = "This is footer"; $scope.data = "footer data scope"; $rootScope.data_global = "thuoc tinh dung chung"; }); </script> </body> </html>結果を画面に出力します。
上記の例にさらに情報を追加すると、注意すべき2つのポイントがあります。
- headerControllerでは、2つのプロパティ$scope.dataと$rootScope.dataに同じ名前（data）が付けられていますが、式を使用してビューを出力する場合、値は$scopeberthのdataプロパティから取得されます。モデルの名前が同じ場合、$scopeが$rootScopeよりも優先されます
- footerControllerには、自分で設定したdata_globalという名前のプロパティがありますが、headerControllerに関連付けられたビューレイヤーでは、意図的にこのdata_globalモデルを呼び出しましたが、ビューは引き続き認識されます。これは、 $ rootScopeのデータがグローバルであることを証明します（コントローラ間でデータを共有または渡すために使用されます）
ネストされたスコープ（ネストされたスコープ）
angleJSには、ネストされたコントローラー、同様にネストされたスコープの概念がありますが、使用されているスコープを区別できない状況が多数あるため、この状況には十分注意する必要があります。以下の例を検討してください。
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-controller="parentController"> What controller am I? {{parentVariable}} <div ng-controller="childController"> What controller am I? {{childVariable}} {{parentVariable}} <button ng-click="childFunction()"> Click me to override! </button> </div> </body> <script> var app = angular.module('myApp', []); app.controller('parentController', function ($scope) { $scope.parentVariable = "I'm the parent"; }); app.controller('childController', function ($scope) { $scope.childVariable = "I'm the child"; $scope.childFunction = function () { $scope.parentVariable = "Parent changed!"; console.log($scope); }; }); </script> </html>テストを実行してオーバーライドボタンをクリックしたときの結果：
ここでの問題は、$ scope変数をログに記録するときに、parentVariableデータが変更されましたが、parentControllerのparentVariableが更新されていないため、この問題はコーディングプロセスで非常に混乱し、不便になるため、アドバイス変数に明確に名前を付ける必要があります。 、ネストされたコントローラーを使用する必要がある場合は、予期しないエラーを回避するために構造を注意深く学習する必要があります。
また、スコープについて言えば、実際には多くの問題がありますが、アプローチの観点からは、angularjsを使用して実際のアプリケーションを作成する前に、これらの概念を把握する必要があります。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
