Как передать некоторые данные с одного контроллера на другой одноранговый контроллер

У меня есть следующие два одноранговых контроллера. Там нет родительского элемента:

<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 part of Controller2    
    }]);

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

В контроллере 1 я хочу обновить значение переменной xxx в HTML, которое контролируется Controller2. Есть ли способ, которым я могу это сделать?

Ответ 1

Определенно использовать службу для обмена данными между контроллерами, вот рабочий пример. $ broadcast не подходит, вам следует избегать использования eventing-системы, когда есть более подходящий способ. Используйте "сервис", "значение" или "константа" (для глобальных констант).

http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp

Вот пример с вводом, чтобы вы могли видеть зеркало данных на странице: http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU

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

Ответ 2

Для достижения этой цели используйте службу

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

var _xxx = {};

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

});

Затем введите эту службу в оба контроллера.

В Controller1 вам нужно будет установить общее значение xxx с вызовом службы: xxxSvc.setXxx(xxx)

Наконец, в Controller2 добавьте $watch для этой функции getXxx() такой функции:

  $scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
        if (newValue != null) {
            //update Controller2 xxx value
            $scope.xxx= newValue;
        }
    }, true);

Ответ 3

В одном контроллере вы можете:

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

и прослушать событие в другом:

$scope.$on('eventName', function (event, data) {...});

Ответ 4

Вам нужно использовать

 $rootScope.$broadcast()

в контроллере, который должен отправлять данные. И в том, кто получает эти данные, вы используете

 $scope.$on

Вот скрипка, которую я разветкил несколько раз назад (я не знаю, кто сделал это сначала больше

http://jsfiddle.net/patxy/RAVFM/