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

AngularJS コントローラー間での変数の共有

AngularJS アプリケーションでは、通信とデータ共有を容易にするために、コントローラー間で変数を渡す必要があることがよくあります。ただし、別のコントローラーから変数にアクセスすると、問題が発生する可能性があります。

従来のアプローチ

理想的なシナリオでは、別のコントローラーから変数に直接アクセスしようとする可能性があります。ただし、このアプローチは、コントローラーが階層 $scope 継承モデルを介して関連付けられていない限り失敗します。

解決策: サービスの使用

より効果的な解決策は、すべてのコントローラーで共有されるサービスを利用することです。サービスをアプリケーションに登録し、目的のコントローラーに挿入することで、そのプロパティとメソッドにアクセスしてデータを交換できます。

サービスの例:

angular.module('myApp').service('sharedProperties', function () {
  var property = 'First';

  return {
    getProperty: function () {
      return property;
    },
    setProperty: function (value) {
      property = value;
    },
  };
});

コントローラーでの使用:

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('Updated Value');
}

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = 'Second';
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

へのバインドプロパティ

共有値によって UI が動的に更新されるようにするには、プリミティブ型ではなくオブジェクトのプロパティにバインドすることを検討してください。これにより、アプリケーション全体で参照を維持できるようになります。

例:

// Replace 'var property = 'First';' with
var property = { Property1: 'First' };

追加リソース

• [バインディング変数AngularJS](https://jasonwatmore.com/post/2014/08/14/AngularJS-bind-to-same-variable-in-multiple-scopes-controllers)

以上がAngularJS コントローラー間で変数を効果的に共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。