[解決済み】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
}

を使うことはできません。 Ctrl1 内部 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つは サービスを作成する を作成し、それを使用したいコントローラでインジェクトします。

簡単なサービス例です。

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;
}

で非常にきれいに記述されています。 このブログ (特にLesson 2以降）。

複数のコントローラでこれらのプロパティにバインドする場合は、プリミティブ型 (boolean、string、number) ではなくオブジェクトのプロパティにバインドすると、バインドした参照を保持できることがわかりました。

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

UPDATEです。 より分かりやすくするために 以下はフィドルです。 の例を示しています。

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