AngularJS コントローラー間でのデータの共有
AngularJS は、シングルページ アプリケーションを構築するための一般的なフレームワークです。多くの場合、コントローラー間でデータを共有する必要があります。一般的な例は、1 つのステップで入力されたデータが後で複数の場所で使用される複数ステップのフォームです。
問題
次のコードを考えてみましょう:
<div ng-controller="FirstCtrl"> <input type="text" ng-model="FirstName"> <br>Input is : <strong>{{FirstName}}</strong> </div> <hr> <div ng-controller="SecondCtrl"> Input should also be here: {{FirstName}} </div>
var myApp = angular.module('myApp', []); myApp.factory('Data', function(){ var FirstName = ''; return FirstName; }); myApp.controller('FirstCtrl', function( $scope, Data ){ }); myApp.controller('SecondCtrl', function( $scope, Data ){ $scope.FirstName = Data.FirstName; });
このコードでは、FirstCtrl コントローラーの入力フィールドに入力されたデータは、 2 番目の Ctrl コントローラー。これは、データ ファクトリがオブジェクト参照ではなくプリミティブ値 (FirstName は文字列) を返すためです。
解決策
簡単な解決策は、ファクトリを使用することです。オブジェクトを返し、コントローラーが同じオブジェクトへの参照を使用して動作できるようにします。
myApp.factory('Fact', function(){ return { Field: '' }; }); myApp.controller('FirstCtrl', function( $scope, Fact ){ $scope.Alpha = Fact; }); myApp.controller('SecondCtrl', function( $scope, Fact ){ $scope.Beta = Fact; });
<div ng-controller="FirstCtrl"> <input type="text" ng-model="Alpha.Field"> First {{Alpha.Field}} </div> <div ng-controller="SecondCtrl"> <input type="text" ng-model="Beta.Field"> Second {{Beta.Field}} </div>
このアプローチでは、両方ともコントローラは同じオブジェクトへの参照を共有し、一方のコントローラでオブジェクトに加えられた変更は、もう一方のコントローラに自動的に反映されます。
詳細オプション
より複雑なシナリオの場合、ゲッターとセッターを使用して、共有されるデータへのアクセスを制御できます。このアプローチにより、データの更新方法をより詳細に制御でき、予期せぬ変更を防ぐことができます。
結論
AngularJS コントローラー間でのデータの共有は一般的なタスクです。利用可能なさまざまな手法を理解することで、特定のアプリケーションのニーズに最適なアプローチを選択できます。
以上がAngularJS コントローラー間でデータを効果的に共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。