☰

AngularJS: コントローラー間で変数を渡すにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript angularjs angularjs-controller
AngularJS: コントローラー間で変数を渡すにはどうすればいいですか? 質問する

Angular コントローラーが 2 つあります。

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

未定義なので、Ctrl1inside は使用できません。ただし、次のように渡そうとすると…Ctrl2

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

エラーが発生します。これをどうやって解決するか知っている人はいますか?

やっている

Ctrl2.prototype = new Ctrl1();

これも失敗します。

注意:これらのコントローラーは互いにネストされていません。

ベストアンサー1

複数のコントローラ間で変数を共有する方法の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;
}

これはとてもうまく説明されているこのブログ（特にレッスン2以降）。

複数のコントローラーにわたってこれらのプロパティにバインドする場合は、バインドされた参照を保持するために、プリミティブ型 (ブール値、文字列、数値) ではなくオブジェクトのプロパティにバインドすると、より適切に機能することがわかりました。

例:var property = { Property1: 'First' };の代わりにvar property = 'First';。

更新:（願わくば）物事をより明確にするためにここにバイオリンがあります次の例を示します。

  • 共有値の静的コピーへのバインド（myController1内）
    • プリミティブ（文字列）へのバインディング
    • オブジェクトのプロパティへのバインド（スコープ変数に保存）
  • 値が更新されると UI を更新する共有値へのバインド (myController2 内)
    • プリミティブ（文字列）を返す関数へのバインディング
    • オブジェクトのプロパティへのバインド
    • オブジェクトのプロパティへの双方向バインディング

おすすめ記事