AngularJS のコントローラー間でデータを共有する
AngularJS のコントローラー間でデータを共有するためにいくつかの方法を使用できますが、ここでは 2つの方法についてのみ説明します。最初の方法は、変数のスコープを設定することです。2 番目の方法は、ファクトリまたはサービスを使用することです。
AngularJS の親と子のコントローラー間でデータを共有する
子コントローラーのスコープは親コントローラーのスコープを継承し、コントローラーの継承を使用するだけでデータを共有できるようにします。
子コンポーネントが親コンポーネント内にネストされている場合、子コンポーネントは親からのデータにアクセスできます。
これは、双方向のデータバインディングを使用して実現されます。親コンポーネントは、プロパティバインディングまたはイベントバインディングのいずれかを使用して、データを子に渡すことができます。
次に、子は、コントローラーのプロパティバインディングまたはイベントバインディングを使用して、このデータを親に戻すことができます。このパターンは、関連するコンポーネント間で選択を共有するためにも使用されます。
スコープオブジェクト
スコープオブジェクトは、コントローラーがインスタンス化されるときに作成され、モデルプロパティとビュープロパティの両方が含まれます。
model プロパティは、他のコントローラーと共有される情報を保持または保存します。一方、view プロパティには、この情報を画面に表示するための情報（HTML など）が含まれるか、格納されます。
AngularJS のファクトリまたはサービスを使用してコントローラー間でデータを共有する
AngularJS では、ファクトリまたはサービスを使用してコントローラー間でデータを共有できます。
ファクトリは、オブジェクトを作成および更新するためのメソッドを含むオブジェクトを返します。あるコントローラーで新しいオブジェクトを作成し、それを別のコントローラーと共有する場合は、ファクトリを使用できます。
サービスは、コントローラーと他の JavaScript ファイル間でデータを共有する場合に使用されます。
結論として、AngularJS のファクトリとサービスは、特定の目的を実行し、メソッドとプロパティの両方を含む JS モジュールです。
それらは、依存性注入を介して他のコンポーネントに注入される場合があります。このメソッドでは、ファクトリで共有変数を定義し、それを両方のコントローラに挿入し、スコープ変数をファクトリデータにリンクできます。
以下の手順に従う必要があります。
-
ファクトリまたはサービスを登録します。
-
データのフェッチを担当するサービスまたはファクトリを作成します。
-
モジュールのプロバイダーのリストにサービスまたはファクトリを追加します。
-
サービスを使用する関数を使用してコントローラーを作成します。
以下は、上記の 2つの方法を使用してコントローラー間でデータを共有する方法を理解するのに役立つ例です。
JavaScript コード：
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
HTML コード：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
ここをクリックして、上記のコードのライブデモを確認してください。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook