Was ist der richtige Weg, um zwischen Controllern in AngularJS zu kommunizieren?

Was ist der richtige Weg, um zwischen Controllern zu kommunizieren?

Ich benutze derzeit einen schrecklichen Fudge mit window:

function StockSubgroupCtrl($scope, $http) {
    $scope.subgroups = [];
    $scope.handleSubgroupsLoaded = function(data, status) {
        $scope.subgroups = data;
    }
    $scope.fetch = function(prod_grp) {
        $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
    }
    window.fetchStockSubgroups = $scope.fetch;
}

function StockGroupCtrl($scope, $http) {
    ...
    $scope.select = function(prod_grp) {
        $scope.selectedGroup = prod_grp;
        window.fetchStockSubgroups(prod_grp);
    }
}

Bearbeiten : Das in dieser Antwort angesprochene Problem wurde in angle.js Version 1.2.7 behoben . $broadcastJetzt wird das Sprudeln über nicht registrierte Bereiche vermieden und läuft genauso schnell wie $ emit.

So, jetzt können Sie:

• Verwendung $broadcastaus dem$rootScope
• Hören Sie mit $on dem lokalen$scope , der über das Ereignis wissen muss

Originalantwort unten

Ich rate dringend, nicht $rootScope.$broadcast+ $scope.$on, sondern $rootScope.$emit+ zu verwenden $rootScope.$on. Ersteres kann schwerwiegende Leistungsprobleme verursachen, wie von @numan angesprochen. Das liegt daran, dass das Ereignis durch alle Bereiche sprudelt .

Letzteres (mit $rootScope.$emit+ $rootScope.$on) leidet jedoch nicht darunter und kann daher als schneller Kommunikationskanal verwendet werden!

Aus der Winkeldokumentation von $emit:

Versendet einen Ereignisnamen über die Bereichshierarchie nach oben und benachrichtigt den Registrierten

Da oben kein Bereich $rootScopevorhanden ist, tritt kein Sprudeln auf. Es ist absolut sicher, $rootScope.$emit()/ $rootScope.$on()als EventBus zu verwenden.

Es gibt jedoch ein Problem, wenn Sie es in Controllern verwenden. Wenn Sie direkt $rootScope.$on()von einem Controller aus eine Bindung herstellen, müssen Sie die Bindung selbst bereinigen, wenn Ihr lokaler $scopeServer zerstört wird. Dies liegt daran, dass Controller (im Gegensatz zu Diensten) über die Lebensdauer einer Anwendung mehrmals instanziiert werden können, was dazu führen würde, dass Bindungen summiert werden und überall Speicherlecks entstehen :)

Um austragen, hört nur auf $scope‚s $destroyEreignis und dann die Funktion aufrufen , die von zurückgegeben wurde $rootScope.$on.

angular
    .module('MyApp')
    .controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {

            var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });

            $scope.$on('$destroy', unbind);
        }
    ]);

Ich würde sagen, das ist nicht wirklich eine eckenspezifische Sache, da es auch für andere EventBus-Implementierungen gilt, dass Sie Ressourcen bereinigen müssen.

In diesen Fällen können Sie Ihnen jedoch das Leben erleichtern. Zum Beispiel könnten Sie einen Affen-Patch erstellen $rootScopeund ihm einen geben $onRootScope, der Ereignisse abonniert, die auf dem $rootScopeausgegeben werden, aber auch den Handler direkt bereinigt, wenn der lokale $scopeServer zerstört wird.

Der sauberste Weg, um Affen zu patchen $rootScope, um eine solche $onRootScopeMethode bereitzustellen , wäre durch einen Dekorateur (ein Run-Block wird es wahrscheinlich auch gut machen, aber pssst, sag es niemandem)

Um sicherzustellen, dass die $onRootScopeEigenschaft beim Aufzählen nicht unerwartet angezeigt wird, verwenden $scopewir Object.defineProperty()und setzen enumerableauf false. Denken Sie daran, dass Sie möglicherweise eine ES5-Unterlegscheibe benötigen.

angular
    .module('MyApp')
    .config(['$provide', function($provide){
        $provide.decorator('$rootScope', ['$delegate', function($delegate){

            Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
                value: function(name, listener){
                    var unsubscribe = $delegate.$on(name, listener);
                    this.$on('$destroy', unsubscribe);

                    return unsubscribe;
                },
                enumerable: false
            });


            return $delegate;
        }]);
    }]);

Mit dieser Methode kann der Controller-Code von oben vereinfacht werden, um:

angular
    .module('MyApp')
    .controller('MyController', ['$scope', function MyController($scope) {

            $scope.$onRootScope('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });
        }
    ]);

Als Endergebnis all dessen rate ich Ihnen dringend, $rootScope.$emit+ zu verwenden $scope.$onRootScope.

Übrigens versuche ich, das Winkel-Team davon zu überzeugen, das Problem innerhalb des Winkelkerns anzugehen. Hier findet eine Diskussion statt: https://github.com/angular/angular.js/issues/4574

Hier ist ein jsperf, das zeigt, wie viel Perfektion $broadcastin einem anständigen Szenario mit nur 100 Sekunden auf den Tisch kommt $scope.

http://jsperf.com/rootscope-emit-vs-rootscope-broadcast

Die beste Antwort hier 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 all diese Antworten ohne eine tatsächliche Lösung.

Es scheint mir, dass die Antwort jetzt sein sollte

• Verwendung $broadcastaus dem$rootScope
• Hören Sie mit $on dem lokalen$scope , der über das Ereignis 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

• Regelmäßige $ scope-Syntax (wie Sie oben sehen)
• neue Controller AsSyntax

Wenn Sie den Listener lokal registrieren $scope, wird er automatisch von $destroyselbst zerstört, wenn der zugehörige Controller entfernt wird.

Verwenden von $ 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 verwenden Sie es in Controller wie folgt:

• 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 gestaltet zu sein scheint. Den Service finden Sie hier .

Auch ein Diagramm ihres Dienstes:

Die tatsächliche Verwendung von Emit und Broadcast ist ineffizient, da das Ereignis in der Bereichshierarchie auf und ab sprudelt, was für eine komplexe Anwendung leicht zu einer Leistungsminderung 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 Service. Fügen Sie dann diesen Eventbus ein, wo immer Sie Events / Themen abonnieren oder veröffentlichen müssen.

Mit get- und set-Methoden innerhalb eines Dienstes können Sie sehr einfach Nachrichten zwischen Controllern übertragen.

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>

In Bezug auf den ursprünglichen Code möchten Sie anscheinend Daten zwischen Bereichen austauschen. Um entweder Daten oder Status zwischen $ scope zu teilen, schlagen die Dokumente die Verwendung eines Dienstes vor:

• So führen Sie zustandslosen oder statusbehafteten Code aus, der von Controllern gemeinsam genutzt wird - Verwenden Sie stattdessen Winkeldienste.
• Instanziieren oder Verwalten des Lebenszyklus anderer Komponenten (z. B. Erstellen von Dienstinstanzen).

Ref: Angular Docs Link hier

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

Als Nachrichtenbus bietet er viele Vorteile, z. B. Bindungen im AMQP-Stil, die Art und Weise, wie Post W / iFrames und Web-Sockets integrieren kann, und vieles mehr.

Ich habe einen Dekorateur benutzt, um die Post einzurichten $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;
    }]);
});

Hier ist ein Link zu einem Blog-Beitrag 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
]

Mir hat gefallen, wie $rootscope.emitdie Interkommunikation erreicht wurde. Ich schlage die saubere und leistungsfähige Lösung vor, ohne den globalen Raum 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 in einem der Geschwister-Controller hinzugefügt werden kann:

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

    alert('Sink that ship!');                       

});

und hier ist natürlich dein HTML:

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

Starten Sie Winkel 1.5 und seinen komponentenbasierten Entwicklungsfokus. Die empfohlene Art der Interaktion von Komponenten besteht in der Verwendung der Eigenschaft 'require' und in Eigenschaftsbindungen (Eingabe / Ausgabe).

Eine Komponente würde eine andere Komponente (z. B. die Stammkomponente) benötigen 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 Root-Komponenten-Controller-Funktion:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Hier ist eine vollständige architektonische Übersicht: Komponentenkommunikation

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

Controller eins

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

zweite Steuerung

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

Mehr Infos hier

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 im Benachrichtigungsdienst.
3. Rufen Sie vom Quellcontroller die notificationService.Method auf. Ich übergebe auch das entsprechende Objekt, um es bei Bedarf beizubehalten.
4. Innerhalb der Methode speichere ich Daten im Benachrichtigungsdienst und rufe die generische Benachrichtigungsmethode auf.
5. Im Ziel-Controller lausche ich ($ scope.on) auf das Broadcast-Ereignis und greife auf Daten vom Notification Service zu.

Da der Benachrichtigungsdienst zu jedem Zeitpunkt ein Singleton ist, sollte er in der Lage sein, persistente Daten für alle bereitzustellen.

Hoffe das hilft

Sie können den integrierten AngularJS-Dienst verwenden $rootScope und diesen Dienst in beide Controller einfügen. Sie können dann auf Ereignisse warten, die für das $ rootScope-Objekt ausgelöst werden.

$ rootScope bietet zwei aufgerufene Ereignis-Dispatcher, $emit and $broadcastdie für das Versenden von Ereignissen verantwortlich sind (möglicherweise benutzerdefinierte Ereignisse) und die $rootScope.$onFunktion zum Hinzufügen eines Ereignis-Listeners verwenden.

Sie sollten den Dienst verwenden, da der $rootscopeZugriff von der gesamten Anwendung aus erfolgt und die Last erhöht wird, oder Sie können die Rootparams verwenden, wenn Ihre Daten nicht mehr sind.

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 können dies tun, indem Sie Winkelereignisse verwenden, die $ emit und $ Broadcast sind. Nach unserem Kenntnisstand 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 auch $ rootScope anstelle von $ scope verwenden. Verwenden Sie Ihren Controller entsprechend.