29

次の 2 つのピア コントローラーがあります。これらの親はありません:

<div data-ng-controller="Controller1">

</div>

<div data-ng-controller="Controller2">
   The value of xxx is: {{ xxx }}
</div>

angular.module('test')
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope'
    function ($rootScope, $scope) {
    // How can I set the value of xxx in the HTML that's part of Controller2    
    }]);

angular.module('test')
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope',
    function ($rootScope, $scope) {
    }]);

コントローラー 1 では、コントローラー 2 によって制御される HTML の変数 xxx の値を更新したいと考えています。これを行う方法はありますか？

4

4 に答える 4

41

これを実現するには、サービスを使用します。

MyApp.app.service("xxxSvc", function () {

var _xxx = {};

return {
    getXxx: function () {
        return _xxx;
    },
    setXxx: function (value) {
        _xxx = value;
    }
};

});

次に、このサービスを両方のコントローラーに挿入します。

Controller1 では、サービスを呼び出して共有 xxx 値を設定する必要があります。xxxSvc.setXxx(xxx)

最後に、Controller2 で、このサービスの getXxx() 関数に次のように $watch を追加します。

  $scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
        if (newValue != null) {
            //update Controller2's xxx value
            $scope.xxx= newValue;
        }
    }, true);
于 2013-09-17T17:46:14.503 に答える
22

サービスを使用してコントローラー間でデータを共有することは間違いありません。これは実際の例です。$broadcast は適切な方法ではありません。より適切な方法がある場合は、イベント システムの使用を避ける必要があります。「サービス」、「値」、または「定数」を使用します (グローバル定数の場合)。

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

ページでデータ ミラーを確認できるように、入力の例を次に示します 。

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

testModule
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;   
    }]);

testModule
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
      $scope.myservice = myservice;
    }]);

testModule
    .service('myservice', function() {
      this.xxx = "yyy";
    });
于 2013-09-17T17:50:43.607 に答える
16

1 つのコントローラーで、次のことができます。

$rootScope.$broadcast('eventName', data);

別のイベントでイベントをリッスンします。

$scope.$on('eventName', function (event, data) {...});
于 2013-09-17T17:46:28.993 に答える