Quelle est la bonne façon de communiquer entre les contrôleurs dans AngularJS?

Quelle est la bonne façon de communiquer entre les contrôleurs?

J'utilise actuellement un horrible fudge impliquant 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);
    }
}

Edit : Le problème abordé dans cette réponse a été résolu dans angular.js version 1.2.7 . $broadcastévite désormais de se propager sur des étendues non enregistrées et s'exécute aussi vite que $ emit.

Vous pouvez donc désormais:

• utiliser à $broadcastpartir du$rootScope
• écouter en utilisant $on le local$scope qui a besoin de connaître l'événement

Réponse originale ci-dessous

Je conseille fortement de ne pas utiliser $rootScope.$broadcast+ $scope.$onmais plutôt $rootScope.$emit+ $rootScope.$on. Le premier peut entraîner de graves problèmes de performances, comme l'a soulevé @numan. En effet, l'événement bouillonnera dans tous les domaines.

Cependant, ce dernier (en utilisant $rootScope.$emit+ $rootScope.$on) n'en souffre pas et peut donc être utilisé comme canal de communication rapide!

De la documentation angulaire de $emit:

Distribue un nom d'événement vers le haut à travers la hiérarchie d'étendue notifiant les inscrits

Puisqu'il n'y a pas de portée ci $rootScope- dessus , il n'y a pas de bouillonnement. Il est totalement sûr d'utiliser $rootScope.$emit()/ $rootScope.$on()comme EventBus.

Cependant, il existe un problème lors de son utilisation à partir de contrôleurs. Si vous vous connectez directement à $rootScope.$on()partir d'un contrôleur, vous devrez nettoyer la liaison vous-même lorsque votre section locale sera $scopedétruite. En effet, les contrôleurs (contrairement aux services) peuvent être instanciés plusieurs fois au cours de la durée de vie d'une application, ce qui entraînerait la synthèse des liaisons, créant éventuellement des fuites de mémoire partout :)

Pour annuler l' enregistrement, il suffit d' écouter sur votre $scopede » $destroyl'événement, puis appeler la fonction qui a été renvoyée par $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);
        }
    ]);

Je dirais que ce n'est pas vraiment une chose spécifique angulaire, car cela s'applique également aux autres implémentations EventBus, que vous devez nettoyer les ressources.

Cependant, vous pouvez vous faciliter la vie dans ces cas. Par exemple, vous pouvez corriger le singe $rootScopeet lui donner un $onRootScopequi s'abonne aux événements émis sur le $rootScopemais nettoie également directement le gestionnaire lorsque le local $scopeest détruit.

La façon la plus propre de patcher le singe $rootScopepour fournir une telle $onRootScopeméthode serait de passer par un décorateur (un bloc d'exécution le fera probablement très bien aussi mais pssst, ne le dites à personne)

Pour vous assurer que la $onRootScopepropriété ne s'affiche pas de manière inattendue lors de l'énumération, $scopenous utilisons Object.defineProperty()et définissons enumerablesur false. Gardez à l'esprit que vous pourriez avoir besoin d'une cale 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;
        }]);
    }]);

Avec cette méthode en place, le code du contrôleur ci-dessus peut être simplifié pour:

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

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

Donc, comme résultat final de tout cela, je vous conseille fortement d'utiliser $rootScope.$emit+ $scope.$onRootScope.

Btw, j'essaie de convaincre l'équipe angulaire de résoudre le problème dans le noyau angulaire. Il y a une discussion en cours ici: https://github.com/angular/angular.js/issues/4574

Voici un jsperf qui montre combien un impact de perf $broadcastapporte à la table dans un scénario décent avec seulement 100 $scope.

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

La meilleure réponse ici était un contournement d'un problème angulaire qui n'existe plus (au moins dans les versions> 1.2.16 et "probablement plus tôt") comme @zumalifeguard l'a mentionné. Mais il me reste à lire toutes ces réponses sans solution réelle.

Il me semble que la réponse devrait maintenant être

• utiliser à $broadcastpartir du$rootScope
• écouter en utilisant $on le local$scope qui a besoin de connaître l'événement

Donc pour publier

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

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

}]);

Et abonnez-vous

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

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

}]);

Plunkers

• Syntaxe $ scope standard (comme vous le voyez ci-dessus)
• nouvelle Controller Assyntaxe

Si vous enregistrez l'auditeur sur le plan local $scope, il sera automatiquement détruit par $destroylui - même quand on retire le contrôleur associé.

Utilisation de $ rootScope. $ Broadcast et $ scope. $ On pour une communication PubSub.

Voir également cet article: AngularJS - Communiquer entre les contrôleurs

Étant donné que defineProperty a un problème de compatibilité avec le navigateur, je pense que nous pouvons penser à utiliser un service.

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

et l'utiliser dans un contrôleur comme celui-ci:

• contrôleur 1

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

• contrôleur 2

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

GridLinked a publié une solution PubSub qui semble assez bien conçue. Le service peut être trouvé ici .

Aussi un schéma de leur service:

En fait, utiliser émettre et diffuser est inefficace car l'événement bouillonne de haut en bas dans la hiérarchie de la portée, ce qui peut facilement se dégrader en réduction des performances pour une application complexe.

Je suggère d'utiliser un service. Voici comment je l'ai récemment implémenté dans l'un de mes projets - https://gist.github.com/3384419 .

Idée de base - enregistrer un pubsub / bus d'événements en tant que service. Injectez ensuite cet Eventbus partout où vous devez vous abonner ou publier des événements / sujets.

En utilisant les méthodes get et set dans un service, vous pouvez très facilement passer des messages entre les contrôleurs.

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

en HTML HTML, vous pouvez vérifier comme ça

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

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

En ce qui concerne le code d'origine - il semble que vous souhaitiez partager des données entre les étendues. Pour partager des données ou un état entre $ scope, les documents suggèrent d'utiliser un service:

• Pour exécuter du code sans état ou avec état partagé entre plusieurs contrôleurs - Utilisez plutôt des services angulaires.
• Pour instancier ou gérer le cycle de vie d'autres composants (par exemple, pour créer des instances de service).

Ref: lien Angular Docs ici

J'ai en fait commencé à utiliser Postal.js comme bus de messages entre les contrôleurs.

Il présente de nombreux avantages en tant que bus de messages, comme les liaisons de style AMQP, la façon dont la poste peut intégrer des iFrames et des sockets Web, et bien d'autres choses.

J'ai utilisé un décorateur pour installer Postal sur $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;
    }]);
});

Voici un lien vers un article de blog sur le sujet ...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

C'est ainsi que je le fais avec Factory / Services et l' injection de dépendance simple (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
]

J'ai aimé la façon dont $rootscope.emitétait utilisé pour réaliser l'intercommunication. Je propose la solution propre et performante sans polluer l'espace global.

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

Voici le moyen rapide et sale.

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

    };

}

Voici un exemple de fonction à ajouter dans l'un des contrôleurs frères:

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

    alert('Sink that ship!');                       

});

et bien sûr voici votre HTML:

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

Démarrage d'angular 1.5 et de son développement basé sur les composants. La manière recommandée pour les composants d'interagir est d'utiliser la propriété 'require' et les liaisons de propriété (entrée / sortie).

Un composant nécessiterait un autre composant (par exemple le composant racine) et obtiendrait une référence à son contrôleur:

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

Vous pouvez ensuite utiliser les méthodes du composant racine dans votre composant enfant:

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

Il s'agit de la fonction de contrôleur de composant racine:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Voici un aperçu architectural complet: Communications de composants

Vous pouvez accéder à cette fonction bonjour n'importe où dans le module

Contrôleur un

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

deuxième contrôleur

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

Plus d'infos ici

Je vais créer un service et utiliser la notification.

1. Créer une méthode dans le service de notification
2. Créez une méthode générique pour diffuser une notification dans Notification Service.
3. Depuis le contrôleur source, appelez notificationService.Method. Je passe également l'objet correspondant pour persister si besoin.
4. Dans la méthode, je conserve les données dans le service de notification et j'appelle la méthode de notification générique.
5. Dans le contrôleur de destination, j'écoute ($ scope.on) l'événement de diffusion et j'accède aux données du service de notification.

Comme à tout moment le service de notification est singleton, il devrait être en mesure de fournir des données persistantes à travers.

J'espère que cela t'aides

Vous pouvez utiliser le $rootScopeservice intégré AngularJS et injecter ce service dans vos deux contrôleurs. Vous pouvez ensuite écouter les événements déclenchés sur l'objet $ rootScope.

$ rootScope fournit deux répartiteurs d'événements appelés $emit and $broadcastqui sont responsables de la répartition des événements (peuvent être des événements personnalisés) et utilisent la $rootScope.$onfonction pour ajouter un écouteur d'événements.

Vous devez utiliser le Service, car l' $rootscopeaccès à partir de toute l'application, et cela augmente la charge, ou vous pouvez utiliser les rootparams si vos données ne sont pas plus.

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

Vous pouvez le faire en utilisant des événements angulaires qui sont $ emit et $ broadcast. Selon nos connaissances, c'est le meilleur moyen, efficace et efficient.

D'abord, nous appelons une fonction d'un contrôleur.

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

    });
});

Vous pouvez également utiliser $ rootScope à la place de $ scope. Utilisez votre contrôleur en conséquence.