AngularJS：コントローラー間で変数を渡すにはどうすればよいですか？

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

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

これはこのブログで非常にうまく説明されています（特にレッスン2以降）。

複数のコントローラー間でこれらのプロパティにバインドする場合は、バインドされた参照を保持するためにプリミティブ型（ブール、文字列、数値）ではなくオブジェクトのプロパティにバインドする方が効果的です。

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

更新：（うまくいけば）ここで物事をより明確にすることは、次の例を示すフィドルです：

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

私は単純な例で単純なものを説明するのが好きです:)

これは非常に簡単なService例です：

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

そしてここにjsbin

そして、これは非常に単純なFactory例です：

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

そしてここにjsbin

それが単純すぎる場合は、より洗練された例を次に示します

関連するベストプラクティスのコメントについては、こちらの回答もご覧ください。

---この回答はこの質問に対するものではないことはわかっていますが、この質問を読んで、工場などのサービスを処理して、問題の発生を回避したいと考えている人が欲しいです-----

このためには、サービスまたはファクトリを使用する必要があります。

サービスは、ネストされていないコントローラー間でデータを共有するためのベストプラクティスです。

データ共有に関するこのトピックに関する非常に優れた注釈は、オブジェクトを宣言する方法です。AngularJSの罠に陥ったので、読む前に私は不運でした。この問題を回避できるようにお手伝いさせてください。

「ng-book：AngularJSに関する完全な本」を読んだところ、ベアデータとしてコントローラーで作成されたAngularJS ng-modelsが間違っている！

$ scope要素は次のように作成する必要があります：

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

そしてこれは好きではありません：

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

これは、DOM（htmlドキュメント）に次のように呼び出しを含めることが推奨されているため（BEST PRACTICE）

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

これは、子コントローラーが親コントローラーからオブジェクトを変更できるようにする場合に、ネストされたコントローラーにとって非常に役立ちます。

しかし、あなたの場合、ネストされたスコープは必要ありませんが、オブジェクトをサービスからコントローラーに取得するための同様の側面があります。

サービス「ファクトリー」があり、戻りスペースに、objectCを含むobjectBを含むobjectAがあるとします。

コントローラーからobjectCをスコープに取得したい場合、それは間違いです。

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

これは機能しません... 代わりにドットを1つだけ使用してください。

$scope.neededObjectInController = Factory.ObjectA;

次に、DOMで、objectAからobjectCを呼び出すことができます。これは、ファクトリに関連するベストプラクティスであり、最も重要なのは、予期しない、キャッチできないエラーを回避するのに役立ちます。

$ rootScopeを使用して、サービスを作成しないソリューション：

アプリコントローラー間でプロパティを共有するには、Angular $ rootScopeを使用できます。これは、データを共有するもう1つのオプションであり、人々がそれを理解できるように配置します。

コントローラ間で一部の機能を共有するための推奨される方法は、$ rootscopeを使用してグローバルプロパティを読み取りまたは変更するサービスです。

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

テンプレートで$ rootScopeを使用する（$ rootでプロパティにアクセスする）：

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

上記のサンプルは魅力のように機能しました。複数の値を管理する必要がある場合に備えて、変更を加えました。これが役に立てば幸いです！

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

私は値を使用する傾向があり、これがなぜ悪い考えであるかを誰もが話し合うのを喜んでいます

var myApp = angular.module('myApp', []);

myApp.value('sharedProperties', {}); //set to empty object - 

次に、サービスごとに値を挿入します。

ctrl1に設定：

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

ctrl2からのアクセス：

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

間で変数を渡す方法を次の例が示す兄弟のコントローラと値が変化したときにアクションを取ります。

使用例：別のビューのコンテンツを変更するフィルターがサイドバーにあります。

angular.module('myApp', [])

  .factory('MyService', function() {

    // private
    var value = 0;

    // public
    return {
      
      getValue: function() {
        return value;
      },
      
      setValue: function(val) {
        value = val;
      }
      
    };
  })
  
  .controller('Ctrl1', function($scope, $rootScope, MyService) {

    $scope.update = function() {
      MyService.setValue($scope.value);
      $rootScope.$broadcast('increment-value-event');
    };
  })
  
  .controller('Ctrl2', function($scope, MyService) {

    $scope.value = MyService.getValue();

    $scope.$on('increment-value-event', function() {    
      $scope.value = MyService.getValue();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <h3>Controller 1 Scope</h3>
  <div ng-controller="Ctrl1">
    <input type="text" ng-model="value"/>
    <button ng-click="update()">Update</button>
  </div>
  
  <hr>
  
  <h3>Controller 2 Scope</h3>
  <div ng-controller="Ctrl2">
    Value: {{ value }}
  </div>  

</div>

コントローラとディレクティブの間でデータを共有するための推奨される方法は、すでに指摘されているようにサービス（ファクトリ）を使用することであることを指摘して、この質問に貢献したいと思いますが、それを行う方法の実用的な例を実行します。

これが作業中のプランカーです： http ://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

最初に、共有データを持つサービスを作成します。

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

次に、それをコントローラーに注入し、スコープで共有データを取得します。

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

ディレクティブでも同じことができます：

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

この実用的で明確な答えが誰かに役立つことを願っています。

あなたはサービスや工場でそれを行うことができます。いくつかのコアの違いはありますが、基本的に同じです。thinkster.ioでのこの説明が最も理解しやすいものであることがわかりました。単純で、要点があり、効果的です。

プロパティをスコープの親の一部にすることもできませんか？

$scope.$parent.property = somevalue;

私はそれが正しいと言っているわけではありませんが、それはうまくいきます。

ああ、別の代替手段としてこの新しいものを少し持ってください。これはlocalstorageであり、angularが機能する場所で機能します。どういたしまして。（しかし、本当に、男に感謝します）

https://github.com/gsklee/ngStorage

デフォルトを定義します。

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

値にアクセスします。

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

値を保存する

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

アプリにngStorageを、コントローラーに$ localStorageを注入することを忘れないでください。

これを行うには2つの方法があります

1）get / setサービスを使用する

2） $scope.$emit('key', {data: value}); //to set the value

 $rootScope.$on('key', function (event, data) {}); // to get the value

2番目のアプローチ：

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

HTML：

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

詳細については、plunkerを参照してください。

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

サービスを提供したくない場合は、このようにすることができます。

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

$ rootScopeとサービスの他に、角度を拡張して共有データを追加するためのクリーンで簡単な代替ソリューションがあります。

コントローラで：

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

このプロパティは、スコープから分離された「angular」オブジェクトに属し、スコープとサービスで共有できます。

その1つの利点は、オブジェクトを注入する必要がないことです。これらは、定義した直後にどこからでもアクセスできます。