Qual è il modo corretto di comunicare tra i controller in AngularJS?

Qual è il modo corretto di comunicare tra i controller?

Attualmente sto usando un orribile fondente che coinvolge 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);
    }
}

Modifica : il problema risolto in questa risposta è stato risolto in angular.js versione 1.2.7 . $broadcastora evita il gorgogliamento degli ambiti non registrati e funziona alla stessa velocità di $ emit.

Quindi ora puoi:

• utilizzare $broadcastdal$rootScope
• ascolta usando $on dal locale$scope che deve conoscere l'evento

Risposta originale di seguito

Consiglio vivamente di non usare $rootScope.$broadcast+ $scope.$onma piuttosto $rootScope.$emit+ $rootScope.$on. Il primo può causare seri problemi di prestazioni sollevati da @numan. Questo perché l'evento passerà attraverso tutti gli ambiti.

Tuttavia, quest'ultimo (usando $rootScope.$emit+ $rootScope.$on) non ne soffre e può quindi essere usato come canale di comunicazione veloce!

Dalla documentazione angolare di $emit:

Invia un nome di evento verso l'alto attraverso la gerarchia dell'ambito che notifica al registrato

Dal momento che non esiste alcun campo di applicazione sopra $rootScope, non si verificano bolle. È totalmente sicuro da usare $rootScope.$emit()/ $rootScope.$on()come EventBus.

Tuttavia, c'è un gotcha quando lo si utilizza da Controller. Se esegui il binding direttamente $rootScope.$on()da un controller, dovrai ripulire il binding da solo quando sei locale$scope viene distrutto. Questo perché i controller (a differenza dei servizi) possono essere istanziati più volte nel corso della vita di un'applicazione, il che si tradurrebbe in riassunti di associazioni che alla fine creano perdite di memoria ovunque :)

Per annullare la registrazione, basta ascoltare sul vostro $scope's $destroyevento e quindi chiamare la funzione che è stato restituito da $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);
        }
    ]);

Direi che non è una cosa davvero angolare in quanto si applica anche ad altre implementazioni EventBus, che devi ripulire le risorse.

Tuttavia, puoi semplificarti la vita in questi casi. Ad esempio, potresti scimmiottare la patch $rootScopee dargli un oggetto $onRootScopeche si iscrive agli eventi emessi sul $rootScopema pulisce direttamente il gestore quando il locale$scope viene distrutto.

Il modo più pulito di applicare la patch a una scimmia $rootScopeper fornire tale $onRootScopemetodo sarebbe attraverso un decoratore (un blocco di esecuzione probabilmente lo farà anche bene ma pssst, non dirlo a nessuno)

Per assicurarci che la $onRootScopeproprietà non venga visualizzata in modo imprevisto durante l'enumerazione su $scopeusiamo Object.defineProperty()e impostiamo enumerablesu false. Tieni presente che potrebbe essere necessario uno spessore ES5.

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

Con questo metodo, il codice del controller dall'alto può essere semplificato per:

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

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

Quindi, come risultato finale di tutto ciò, ti consiglio vivamente di usare $rootScope.$emit+$scope.$onRootScope .

A proposito, sto cercando di convincere la squadra angolare ad affrontare il problema all'interno del nucleo angolare. C'è una discussione in corso qui: https://github.com/angular/angular.js/issues/4574

Ecco un jsperf che mostra quanto di un impatto perfetto $broadcastporti sul tavolo in uno scenario decente con soli 100 $scopeanni.

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

Il risposta migliore qui è stata una soluzione a un problema angolare che non esiste più (almeno nelle versioni> 1.2.16 e "probabilmente precedente"), come menzionato da @zumalifeguard. Ma sono rimasto a leggere tutte queste risposte senza una soluzione reale.

Mi sembra che la risposta ora dovrebbe essere

• utilizzare $broadcastdal$rootScope
• ascolta usando $on dal locale$scope che deve conoscere l'evento

Quindi per pubblicare

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

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

}]);

E iscriviti

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

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

}]);

Plunkers

• Sintassi $ scope normale (come vedi sopra)
• nuova Controller Assintassi

Se si registra il listener sul locale $scope, verrà automaticamente distrutto da $destroysolo quando il controller associato viene rimosso.

Utilizzando $ rootScope. $ Broadcast e $ scope. $ On per una comunicazione PubSub.

Inoltre, vedi questo post: AngularJS - Comunicazione tra controller

Poiché defineProperty ha un problema di compatibilità con il browser, penso che possiamo pensare di utilizzare un servizio.

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

e usalo nel controller in questo modo:

• controller 1

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

• controller 2

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

GridLinked ha pubblicato una soluzione PubSub che sembra essere stata progettata abbastanza bene. Il servizio è disponibile qui .

Anche uno schema del loro servizio:

In realtà l'utilizzo dell'emissione e della trasmissione è inefficace perché l'evento bolle su e giù nella gerarchia dell'ambito che può facilmente degradare in un imbottigliamento delle prestazioni per un'applicazione complessa.

Vorrei suggerire di utilizzare un servizio. Ecco come l'ho implementato di recente in uno dei miei progetti: https://gist.github.com/3384419 .

Idea di base: registrare un bus pub / evento come servizio. Quindi iniettare quel bus degli eventi ovunque sia necessario abbonarsi o pubblicare eventi / argomenti.

Utilizzando i metodi get e set all'interno di un servizio è possibile passare messaggi tra controller in modo molto semplice.

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 puoi controllare in questo modo

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

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

Per quanto riguarda il codice originale, sembra che desideri condividere i dati tra gli ambiti. Per condividere dati o stato tra $ scope i documenti suggeriscono di utilizzare un servizio:

• Per eseguire codice stateless o stateful condiviso tra controller: utilizzare invece i servizi angolari.
• Per istanziare o gestire il ciclo di vita di altri componenti (ad esempio, per creare istanze di servizio).

Rif: Angular Docs link qui

In realtà ho iniziato a utilizzare Postal.js come bus dei messaggi tra i controller.

Ci sono molti vantaggi come un bus di messaggi come i collegamenti in stile AMQP, il modo in cui Postal può integrare w / iFrame e socket Web e molte altre cose.

Ho usato un decoratore per installare Postal su $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;
    }]);
});

Ecco un link a un post sul blog sull'argomento ...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

È così che lo faccio con Factory / Services e 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
]

Mi è piaciuto il modo in cui è $rootscope.emitstato utilizzato per ottenere l'intercomunicazione. Suggerisco la soluzione pulita ed efficace in termini di prestazioni senza inquinare lo spazio globale.

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

Ecco il modo rapido e sporco.

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

    };

}

Ecco una funzione di esempio da aggiungere in uno dei controller di pari livello:

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

    alert('Sink that ship!');                       

});

e ovviamente ecco il tuo HTML:

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

A partire dall'angolo 1.5 e dal focus sullo sviluppo basato sui componenti. Il modo raccomandato per i componenti di interagire è attraverso l'uso della proprietà 'request' e attraverso i binding di proprietà (input / output).

Un componente richiederebbe un altro componente (ad esempio il componente radice) e ottenere un riferimento al suo controller:

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

È quindi possibile utilizzare i metodi del componente radice nel componente figlio:

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

Questa è la funzione del controller del componente radice:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Ecco una panoramica architettonica completa: Comunicazioni componenti

Puoi accedere a questa funzione Hello ovunque nel modulo

Controller uno

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

secondo controller

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

Maggiori informazioni qui

Creerò un servizio e utilizzerò la notifica.

1. Creare un metodo nel servizio di notifica
2. Creare un metodo generico per trasmettere le notifiche nel Servizio di notifica.
3. Dal controller di origine, chiamare notificationService.Method. Passo anche l'oggetto corrispondente a persistere se necessario.
4. All'interno del metodo, conservo i dati nel servizio di notifica e chiamo il metodo di notifica generico.
5. Nel controller di destinazione ascolto ($ scope.on) l'evento di trasmissione e accedo ai dati dal servizio di notifica.

Poiché in qualsiasi momento il servizio di notifica è singleton, dovrebbe essere in grado di fornire dati permanenti su tutto.

Spero che sia di aiuto

È possibile utilizzare il servizio integrato AngularJS $rootScopee iniettare questo servizio in entrambi i controller. È quindi possibile ascoltare gli eventi generati sull'oggetto $ rootScope.

$ rootScope fornisce due dispatcher di eventi chiamati $emit and $broadcastche sono responsabili dell'invio di eventi (possono essere eventi personalizzati) e usano la $rootScope.$onfunzione per aggiungere un listener di eventi.

Dovresti usare il Servizio, perché $rootscopeè l'accesso dall'intera Applicazione, e aumenta il carico, oppure puoi usare i rootparam se i tuoi dati non sono più.

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

Puoi farlo usando eventi angolari che sono $ emettono e $ trasmettono. Secondo le nostre conoscenze, questo è il modo migliore, efficiente ed efficace.

Per prima cosa chiamiamo una funzione da un controller.

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

    });
});

Puoi anche usare $ rootScope al posto di $ scope. Usa il tuo controller di conseguenza.