Как правильно общаться между контроллерами в AngularJS?

top answer здесь была проблема с проблемой Angular, которая больше не существует (по крайней мере, в версиях > 1.2.16 и "возможно, раньше" ) как отметил @zumalifeguard. Но я оставил все эти ответы без реального решения.

Мне кажется, что теперь ответ должен быть

• используйте $broadcast из $rootScope
• прослушивайте с помощью $on из локального $scope, который должен знать о событии

Итак, опубликуем

// EXAMPLE PUBLISHER
angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope',
function ($rootScope, $scope) {

  $rootScope.$broadcast('topic', 'message');

}]);

И подписаться

// EXAMPLE SUBSCRIBER
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope) {

  $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg;
  });

}]);

Plunkers

• Регулярный синтаксис $scope (как вы видите выше)
• новый синтаксис Controller As

Если вы зарегистрируете прослушиватель на локальном $scope, он будет автоматически уничтожен самим $destroy при удалении соответствующего контроллера.

Используя $rootScope. $broadcast и $scope. $on для связи PubSub.

Также см. этот пост: AngularJS - Связь между контроллерами

Поскольку у defineProperty есть проблема совместимости с браузером, я думаю, мы можем подумать об использовании сервиса.

angular.module('myservice', [], function($provide) {
    $provide.factory('msgBus', ['$rootScope', function($rootScope) {
        var msgBus = {};
        msgBus.emitMsg = function(msg) {
        $rootScope.$emit(msg);
        };
        msgBus.onMsg = function(msg, scope, func) {
            var unbind = $rootScope.$on(msg, func);
            scope.$on('$destroy', unbind);
        };
        return msgBus;
    }]);
});

и используйте его в контроллере следующим образом:

• контроллер 1

  function($scope, msgBus) {
      $scope.sendmsg = function() {
          msgBus.emitMsg('somemsg')
      }
  }
  

• контроллер 2

  function($scope, msgBus) {
      msgBus.onMsg('somemsg', $scope, function() {
          // your logic
      });
  }
  

GridLinked разместил решение PubSub, которое кажется который будет хорошо разработан. Сервис можно найти здесь.

Также показана схема их обслуживания:

Фактически использование emit и broadcast неэффективно, потому что событие пузырится вверх и вниз по иерархии областей, которые могут легко деградировать в пакет производительности для сложного приложения.

Я бы предложил использовать сервис. Вот как я недавно реализовал его в одном из моих проектов - https://gist.github.com/3384419.

Основная идея - зарегистрировать шину pubsub/event в качестве сервиса. Затем введите этот eventbus, где вам нужно подписаться или опубликовать события/темы.

Используя методы get и set внутри службы, вы можете легко передавать сообщения между контроллерами.

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

myApp.factory('myFactoryService',function(){


    var data="";

    return{
        setData:function(str){
            data = str;
        },

        getData:function(){
            return data;
        }
    }


})


myApp.controller('FirstController',function($scope,myFactoryService){
    myFactoryService.setData("Im am set in first controller");
});



myApp.controller('SecondController',function($scope,myFactoryService){
    $scope.rslt = myFactoryService.getData();
});

в HTML HTML вы можете проверить это как

<div ng-controller='FirstController'>  
</div>

<div ng-controller='SecondController'>
    {{rslt}}
</div>

Что касается исходного кода - кажется, вы хотите обмениваться данными между областями. Чтобы поделиться данными или состоянием между $scope, документы предлагают использовать службу:

• Для запуска кода без сохранения состояния или состояния, разделяемого между контроллерами. Используйте angular.
• Чтобы создать или управлять жизненным циклом другие компоненты (например, для создания экземпляров службы).

Ссылка: Angular Ссылка на Документы здесь

Я действительно начал использовать Postal.js в качестве шины сообщений между контроллерами.

Есть много преимуществ для него как шина сообщений, такая как привязки стиля AMQP, способ, которым почтовая система может интегрировать w/iFrames и веб-сокеты и многое другое.

Я использовал декоратор, чтобы настроить Postal на $scope.$bus...

angular.module('MyApp')  
.config(function ($provide) {
    $provide.decorator('$rootScope', ['$delegate', function ($delegate) {
        Object.defineProperty($delegate.constructor.prototype, '$bus', {
            get: function() {
                var self = this;

                return {
                    subscribe: function() {
                        var sub = postal.subscribe.apply(postal, arguments);

                        self.$on('$destroy',
                        function() {
                            sub.unsubscribe();
                        });
                    },
                    channel: postal.channel,
                    publish: postal.publish
                };
            },
            enumerable: false
        });

        return $delegate;
    }]);
});

Здесь ссылка на сообщение в блоге по теме...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

Мне понравилось, как $rootscope.emit использовался для достижения взаимодействия. Я предлагаю чистое и эффективное решение без загрязнения глобального пространства.

module.factory("eventBus",function (){
    var obj = {};
    obj.handlers = {};
    obj.registerEvent = function (eventName,handler){
        if(typeof this.handlers[eventName] == 'undefined'){
        this.handlers[eventName] = [];  
    }       
    this.handlers[eventName].push(handler);
    }
    obj.fireEvent = function (eventName,objData){
       if(this.handlers[eventName]){
           for(var i=0;i<this.handlers[eventName].length;i++){
                this.handlers[eventName][i](objData);
           }

       }
    }
    return obj;
})

//Usage:

//In controller 1 write:
eventBus.registerEvent('fakeEvent',handler)
function handler(data){
      alert(data);
}

//In controller 2 write:
eventBus.fireEvent('fakeEvent','fakeData');

Вот как я это делаю с Factory/Services и простым инъекции зависимостей (DI).

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

# PeopleService holds the "data".
angular.module('myApp').factory 'PeopleService', ()->
  [
    {name: "Jack"}
  ]

# Controller where PeopleService is injected
angular.module('myApp').controller 'PersonFormCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
  $scope.person = {} 

  $scope.add = (person)->
    # Simply push some data to service
    PeopleService.push angular.copy(person)
]

# ... and again consume it in another controller somewhere...
angular.module('myApp').controller 'PeopleListCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
]

Вот быстрый и грязный способ.

// Add $injector as a parameter for your controller

function myAngularController($scope,$injector){

    $scope.sendorders = function(){

       // now you can use $injector to get the 
       // handle of $rootScope and broadcast to all

       $injector.get('$rootScope').$broadcast('sinkallships');

    };

}

Вот примерная функция для добавления внутри любого из дочерних контроллеров:

$scope.$on('sinkallships', function() {

    alert('Sink that ship!');                       

});

и, конечно, вот ваш HTML:

<button ngclick="sendorders()">Sink Enemy Ships</button>

Вы можете сделать это, используя события angular, которые являются $emit и $broadcast. По нашим знаниям это лучший, эффективный и эффективный способ.

Сначала мы вызываем функцию от одного контроллера.

var myApp = angular.module('sample', []);
myApp.controller('firstCtrl', function($scope) {
    $scope.sum = function() {
        $scope.$emit('sumTwoNumber', [1, 2]);
    };
});
myApp.controller('secondCtrl', function($scope) {
    $scope.$on('sumTwoNumber', function(e, data) {
        var sum = 0;
        for (var a = 0; a < data.length; a++) {
            sum = sum + data[a];
        }
        console.log('event working', sum);

    });
});

Вы также можете использовать $rootScope вместо $scope. Используйте ваш контроллер соответственно.

Запуск angular 1.5 и сосредоточение на основе компонентов. Рекомендуемый способ взаимодействия компонентов заключается в использовании свойства "require" и связывания свойств (ввода/вывода).

Для компонента потребуется другой компонент (например, корневой компонент) и получить ссылку на него:

angular.module('app').component('book', {
    bindings: {},
    require: {api: '^app'},
    template: 'Product page of the book: ES6 - The Essentials',
    controller: controller
});

Затем вы можете использовать методы корневого компонента в дочернем компоненте:

$ctrl.api.addWatchedBook('ES6 - The Essentials');

Это функция контроллера корневого компонента:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Вот полный обзор архитектуры: Компонентные коммуникации

function mySrvc() {
  var callback = function() {

  }
  return {
    onSaveClick: function(fn) {
      callback = fn;
    },
    fireSaveClick: function(data) {
      callback(data);
    }
  }
}

function controllerA($scope, mySrvc) {
  mySrvc.onSaveClick(function(data) {
    console.log(data)
  })
}

function controllerB($scope, mySrvc) {
  mySrvc.fireSaveClick(data);
}

Вы можете использовать встроенную службу AngularJS $rootScope и ввести эту службу в оба ваших контроллера. Затем вы можете прослушивать события, которые запускаются на объекте $rootScope.

$rootScope предоставляет два диспетчера событий, называемых $emit and $broadcast, которые отвечают за диспетчеризацию событий (могут быть настраиваемые события) и используют функцию $rootScope.$on для добавления прослушивателя событий.

Вы должны использовать Сервис, потому что $rootscope - это доступ из всего приложения, и он увеличивает нагрузку, или вы используете корневые патчи, если ваши данные не больше.

Я создам службу и использую уведомление.

• Создайте метод в службе уведомлений
• Создайте общий метод для трансляции уведомлений в службе уведомлений.
• Из исходного контроллера вызывается метод notificationService.Method. Я также передаю соответствующий объект для сохранения, если это необходимо.
• Внутри метода я сохраняю данные в службе уведомлений и вызываю общий метод уведомления.
• В контроллере назначения я слушаю ($ scope.on) для широковещательного события и получаю данные из службы уведомлений.

Как и в любой точке службы Notification Service, она должна обеспечивать постоянную передачу данных.

Надеюсь, что это поможет

Вы можете получить доступ к этой функции hello в любом месте модуля

Контроллер один

 $scope.save = function() {
    $scope.hello();
  }

второй контроллер

  $rootScope.hello = function() {
    console.log('hello');
  }

Дополнительная информация здесь