AngularJS：通过服务在两个示波器/控制器之间进行双向通信

Question

I have quite a few scenarios where I need clicks, etc. to trigger behavior in another place on the page (a one-way communication scenario). I now have a need for bi-directional communication, where stuff that happens in element A can modify specific properties in the scope behind element B and vice-versa. Thus far, I've been using $rootScope.$broadcast to facilitate this but it feels like overkill, and winds up creating boilerplate in both places:

$scope.$on('event-name', function(event, someArg) {
    if(someArg === $scope.someProperty) return;

    $scope.someProperty = someArg;
});

$scope.$watch('someProperty', function(newValue) {
    $rootScope.$broadcast('event-name', newValue);
});

Is there a better way? I'd like to tie the two (or three, or N) scopes together via a service, but I don't see a way to do that without magic event names and boilerplate.

Answer 1

I haven't used this myself, but this post explains basically how I would do it. Here's the code which illustrates the idea:

(function() {
    var mod = angular.module("App.services", []);

    //register other services here...

    /* pubsub - based on https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js*/
    mod.factory('pubsub', function() {
        var cache = {};
        return {
            publish: function(topic, args) { 
                cache[topic] && $.each(cache[topic], function() {
                    this.apply(null, args || []);
                });
            },

            subscribe: function(topic, callback) {
                if(!cache[topic]) {
                    cache[topic] = [];
                }
                cache[topic].push(callback);
                return [topic, callback]; 
            },

            unsubscribe: function(handle) {
                var t = handle[0];
                cache[t] && d.each(cache[t], function(idx){
                    if(this == handle[1]){
                        cache[t].splice(idx, 1);
                    }
                });
            }
        }
    });


    return mod;
})();

Note the memory leak though if controllers are "deleted" without unsubscribing.

Answer 2

I think you can try the following service,

 'use strict'; angular.module('test') .service('messageBus', function($q) { var subscriptions = {}; var pendingQuestions = []; this.subscribe = function(name) { subscriptions[name].requestDefer = $q.defer(); return subscriptions[name].requestDefer.promise; //for outgoing notifications } this.unsubscribe = function(name) { subscriptions[name].requestDefer.resolve(); subscriptions[name].requestDefer = null; } function publish(name, data) { subscriptions[name].requestDefer.notify(data); } //name = whom shd answer ? //code = what is the question ? //details = details abt question. this.request = function(name, code, details) { var defered = null; if (subscriptions[name].requestDefer) { if (pendingQuestions[code]) { //means this question is already been waiting for answer. //hence return the same promise. A promise with multiple handler will get //same data. defered = pendingQuestions[code]; } else { defered = $q.defer(); //this will be resolved by response method. pendingQuestions[code] = defered; //asking question to relevant controller publish(name, { code: code, details: details }); } } else { //means that one is not currently in hand shaked with service. defered = $q.defer(); defered.resolve({ code: "not subscribed" }); } return defered.promise; } //data = code + details //responder does not know the destination. This will be handled by the service using //pendingQuestions[] array. or it is preemptive, so decide by code. this.response = function(data) { var defered = pendingQuestions[data.code]; if (defered) { defered.resolve(data); } else { //means nobody requested for this. handlePreemptiveNotifications(data); } } function handlePreemptiveNotifications() { switch (data.code) { //handle them case by case } } }); 

This can be used as a message bus in multi controller communication. It is making use of the angular notify() callback of promise API.All the participating controllers should subscribe the service as follows,

 angular.module('test') .controller('Controller1', function($scope, messageBus) { var name = "controller1"; function load() { var subscriber = messageBus.subscribe(name); subscriber.then(null, null, function(data) { handleRequestFromService(data); }); } function handleRequestFromService(data) { //process according to data content if (data.code == 1) { data.count = 10; messageBus.respond(data); } } $scope.$on("$destroy", function(event) { //before do any pending updates messageBus.unsubscribe(name); }); load(); }); angular.module('test') .controller('Controller2', function($scope, messageBus) { var name = "controller2"; function load() { var subscriber = messageBus.subscribe(name); subscriber.then(null, null, function(data) { handleRequestFromService(data); }); } function handleRequestFromService(data) { //process according to data content } $scope.getHorseCount = function() { var promise = messageBus.request("controller1", 1, {}); promise.then(function(data) { console.log(data.count); }); } $scope.$on("$destroy", function(event) { //before do any pending updates messageBus.unsubscribe(name); }); load(); });