Wie kann ich in AngularJS zwischen Controllern kommunizieren?

Das oberste Antwort war eine Umgehung eines Angular-Problems, das nicht mehr existiert (zumindest in Versionen> 1.2.16 und "wahrscheinlich früher"), wie @zumalifeguard erwähnt hat. Aber ich lese alle diese Antworten ohne eine wirkliche Lösung. 

Es scheint mir, dass die Antwort jetzt sein sollte 

• verwenden Sie $broadcast aus dem $rootScope
• hören Sie mit $onvom lokalen $scope, der über das Ereignis Bescheid wissen muss

Also zu veröffentlichen

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

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

}]);

Und abonnieren

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

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

}]);

Plunker

• Regular $ scope syntax (wie Sie oben sehen)
• neue Controller As-Syntax

Wenn Sie den Listener im lokalen $scope registrieren, wird er wird automatisch von $destroy selbst zerstört } gelöscht, wenn der zugehörige Controller entfernt wird. 

Verwenden Sie $ rootScope. $ Broadcast und $ scope. $ On für eine PubSub-Kommunikation.

Siehe auch diesen Beitrag: AngularJS - Kommunikation zwischen Controllern

Da defineProperty ein Problem mit der Browserkompatibilität aufweist, können wir über die Verwendung eines Dienstes nachdenken.

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

und verwende es wie folgt im Controller:

• controller 1 

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

• controller 2 

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

GridLinked hat eine PubSub -Lösung veröffentlicht, die ziemlich gut zu sein scheint. Der Dienst ist hier zu finden.

Auch ein Diagramm ihres Dienstes:

Die Verwendung von Emit und Broadcast ist eigentlich ineffizient, da das Ereignis in der Hierarchie des Bereichs nach oben und unten sprudelt, was bei einer komplexen Anwendung leicht zu einer Leistungsabsenkung führen kann.

Ich würde vorschlagen, einen Dienst zu nutzen. So habe ich es kürzlich in einem meiner Projekte implementiert - https://Gist.github.com/3384419 . 

Grundidee - Registrieren Sie einen Pubsub/Event-Bus als Dienst. Fügen Sie diesen Eventbus dann an der Stelle ein, an der Sie Ereignisse/Themen abonnieren oder veröffentlichen müssen.

Wenn Sie innerhalb eines Dienstes get- und set-Methoden verwenden, können Sie Nachrichten sehr einfach zwischen Steuerungen weiterleiten.

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

in HTML HTML können Sie dies überprüfen

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

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

Bezüglich des ursprünglichen Codes - es scheint, dass Sie Daten zwischen Bereichen austauschen möchten. Um Daten oder Status zwischen dem $ -Zonenbereich freizugeben, schlagen die Dokumente die Verwendung eines Dienstes vor:

• So führen Sie zustandslosen oder zustandsbehafteten Code aus, der von Controllern gemeinsam verwendet wird: Verwenden Sie stattdessen die Angle-Dienste. 
• Zum Instanziieren oder Verwalten des Lebenszyklus anderer Komponenten (z. B. zum Erstellen von Service-Instanzen).

Ref: Angular Docs Link hier

Ich habe tatsächlich angefangen, Postal.js als Nachrichtenbus zwischen Controllern zu verwenden.

Der Message-Bus bietet viele Vorteile, wie z. B. AMQP-Style-Bindungen, die Integration von Post mit iFrames und Web-Sockets und vieles mehr.

Ich habe einen Dekorateur verwendet, um Postal auf $scope.$bus ... einzurichten.

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

Hier ist ein Link zu einem Blogbeitrag zum Thema ...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

So mache ich das mit Factory/Services und Simple Dependency Injection (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
]

Ich mochte die Art und Weise, wie $rootscope.emit für die Kommunikation untereinander verwendet wurde. Ich empfehle die saubere und leistungsfähige Lösung, ohne den Weltraum zu verschmutzen.

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');

Hier ist der schnelle und schmutzige Weg.

// 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');

    };

}

Hier ist eine Beispielfunktion, die Sie in einem beliebigen Controller hinzufügen können

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

    alert('Sink that ship!');                       

});

und hier ist natürlich dein HTML:

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

Auf diese Hallo-Funktion können Sie überall im Modul zugreifen 

Controller eins

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

zweiter Controller

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

Mehr Infos hier

Beginnend mit Winkel 1.5 und dem komponentenbasierten Entwicklungsfokus. Die empfohlene Methode für die Interaktion von Komponenten ist die Verwendung der Eigenschaft 'Request' und der Eigenschaftsbindung (Eingabe/Ausgabe).

Eine Komponente würde eine andere Komponente (zum Beispiel die Wurzelkomponente) erfordern und einen Verweis auf ihren Controller erhalten:

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

Sie können dann die Methoden der Stammkomponente in Ihrer untergeordneten Komponente verwenden:

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

Dies ist die Hauptkomponenten-Controller-Funktion:

function addWatchedBook(bookName){

  booksWatched.Push(bookName);

}

Hier ist eine vollständige architektonische Übersicht: Komponentenkommunikation

Sie können den eingebauten AngularJS-Dienst $rootScope verwenden und diesen Dienst in Ihre beiden Controller einbinden. __ Sie können dann Ereignisse überwachen, die für das $ rootScope-Objekt ausgelöst werden. 

$ rootScope bietet zwei Ereignis-Dispatcher mit dem Namen $emit and $broadcast, die für das Auslösen von Ereignissen verantwortlich sind (möglicherweise benutzerdefinierte Ereignisse), und verwenden die Funktion $rootScope.$on, um den Ereignislistener hinzuzufügen.

Sie können dies tun, indem Sie winklige Ereignisse verwenden, die $ emit und $ broadcast sind. Nach unserem Wissen ist dies der beste, effizienteste und effektivste Weg.

Zuerst rufen wir eine Funktion von einem Controller aus auf.

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

    });
});

Sie können $ rootScope auch anstelle von $ scope verwenden. Verwenden Sie Ihren Controller entsprechend.

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

Sie sollten den Dienst verwenden, da $rootscope Zugriff von der gesamten Anwendung aus ist und die Auslastung erhöht, oder Sie können die rootparams verwenden, wenn Ihre Daten nicht mehr sind.

Ich werde einen Dienst erstellen und eine Benachrichtigung verwenden.

1. Erstellen Sie eine Methode im Benachrichtigungsdienst
2. Erstellen Sie eine generische Methode zum Senden von Benachrichtigungen in Notification Service.
3. Rufen Sie vom Quellcontroller die notificationService.Method auf. Ich übergebe auch das entsprechende Objekt, um bei Bedarf zu bleiben.
4. Innerhalb der Methode behalte ich Daten im Benachrichtigungsdienst und rufe die generische Benachrichtigungsmethode auf.
5. Im Ziel-Controller höre ich ($ scope.on) auf das Broadcast-Ereignis und greife auf Daten vom Benachrichtigungsdienst zu. 

Da der Notification Service zu jedem Zeitpunkt Singleton ist, sollte er in der Lage sein, persistente Daten bereitzustellen.

Hoffe das hilft