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

AngularJS コントローラー間で変数を共有する

問題を理解する

AngularJS では、コントローラーは分離されたスコープです。つまり、コントローラーは変数に直接アクセスできません。他のコントローラーで宣言されています。これは、複数のコントローラ間でデータを共有するときに問題になる可能性があります。

サービスベースのアプローチ

この問題に対する一般的な解決策の 1 つは、サービスを使用することです。サービスはアプリケーション全体で共有され、任意のコントローラーに挿入できます。これらは、共有されるデータの保持と管理を担当します。

サービス例:

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

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

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

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

共有へのデー​​タのバインドオブジェクト

サービス内のオブジェクトのプロパティにデータをバインドすると便利な場合があります。これにより、オブジェクトへの変更が、そのオブジェクトにバインドされている UI コンポーネントに確実に反映されます。

オブジェクトを使用したサービスの例:

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

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

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

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = "Second";
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
  sharedProperties.setProperty($scope.both); // Update service property when UI changes
}

サービスを活用し、データをオブジェクトにバインドすることで、 AngularJS コントローラー間で変数を効果的に共有し、アプリケーション全体でデータの一貫性を維持できます。

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