ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS コントローラー間でデータを効果的に共有するにはどうすればよいですか?

AngularJS コントローラー間でデータを効果的に共有するにはどうすればよいですか?

DDD
リリース: 2024-12-17 05:49:26
オリジナル
438 人が閲覧しました

How Can I Effectively Share Data Between AngularJS Controllers?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート