Bidirectional communication between two AngularJS scopes or controllers utilizing a service

Question

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

I am facing numerous situations where I require clicks or other interactions to trigger actions in a different area of the webpage (one-way communication). Now, I have encountered a need for bidirectional communication, where changes made in element A can affect specific attributes in the context behind element B and vice versa. Up until now, I have been using $rootScope.$broadcast to achieve this functionality, but it seems excessive and results in redundant code 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 more efficient solution? I would like to connect the two (or three, or N) scopes through a service, but I cannot find a way to do so without resorting to magical event names and repetitive code.

javascript angularjs

Answer 1

Answer №1

Although I have not personally tried this method, this answer provides a detailed explanation of how it can be implemented. You can also refer to this code snippet for a visual representation:

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

    //additional services go here...

    /* pubsub - sourced from 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;
})();

It's important to note the potential memory leak that may occur if controllers are "deleted" without proper unsubscribing.

Answer 2

Although I have not personally tried this method, this answer provides a detailed explanation of how it can be implemented. You can also refer to this code snippet for a visual representation:

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

    //additional services go here...

    /* pubsub - sourced from 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;
})();

It's important to note the potential memory leak that may occur if controllers are "deleted" without proper unsubscribing.

Answer 3

Answer №2

Consider giving this service a try:

'use strict';
angular.module('test')
  .service('messageBus', function($q) {
    var subs = {};
    var pendingQs = [];

    this.sub = function(name) {
      subs[name].reqDfr = $q.defer();
      return subs[name].reqDfr.promise;
    }

    this.unsub = function(name) {
      subs[name].reqDfr.resolve();
      subs[name].reqDfr = null;
    }

    function pub(name, data) {
      subs[name].reqDfr.notify(data);
    }

    this.req = function(name, code, details) {
      var dfrd = null;
      if (subs[name].reqDfr) {
        if (pendingQs[code]) {
          dfrd = pendingQuestions[code];
        } else {
          dfrd = $q.defer();
          pendingQs[code] = dfrd;
          pub(name, {
            code: code,
            details: details
          });
        }
      } else {
        dfrd = $q.defer();
        dfrd.resolve({
          code: "not subscribed"
        });
      }
      return dfrd.promise;
    }

    this.res = function(data) {
      var dfrd = pendingQs[data.code];
      if (dfrd) {
        dfrd.resolve(data);
      } else {
        handlePreemptiveNotifications(data);
      }
    }

    function handlePreemptiveNotifications() {
      switch (data.code) {
        
      }
    }
  });

This method can facilitate multi-controller communication as a message bus. It leverages the promises API in Angular for notification callbacks. All controllers involved should subscribe to the service like so:

angular.module('test')
  .controller('Controller1', function($scope, messageBus) {
    var name = "controller1";

    function load() {
      var subscr = messageBus.sub(name);
      subscr.then(null, null, function(data) {
        handleRequestFromService(data);
      });
    }

    function handleRequestFromService(data) {
      if (data.code == 1) {
        data.count = 10;
        messageBus.res(data);
      }
    }

    $scope.$on("$destroy", function(event) {
      messageBus.unsub(name);
    });

    load();
  });

angular.module('test')
  .controller('Controller2', function($scope, messageBus) {
    var name = "controller2";

    function load() {
      var subscr = messageBus.sub(name);
      subscr.then(null, null, function(data) {
        handleRequestFromService(data);
      });
    }

    function handleRequestFromService(data) {
      
    }

    $scope.getHorseCount = function() {
      var promise = messageBus.req("controller1", 1, {});
      promise.then(function(data) {
        console.log(data.count);
      });
    }

    $scope.$on("$destroy", function(event) {
      messageBus.unsub(name);
    });

    load();
  });

Answer 4

Consider giving this service a try:

'use strict';
angular.module('test')
  .service('messageBus', function($q) {
    var subs = {};
    var pendingQs = [];

    this.sub = function(name) {
      subs[name].reqDfr = $q.defer();
      return subs[name].reqDfr.promise;
    }

    this.unsub = function(name) {
      subs[name].reqDfr.resolve();
      subs[name].reqDfr = null;
    }

    function pub(name, data) {
      subs[name].reqDfr.notify(data);
    }

    this.req = function(name, code, details) {
      var dfrd = null;
      if (subs[name].reqDfr) {
        if (pendingQs[code]) {
          dfrd = pendingQuestions[code];
        } else {
          dfrd = $q.defer();
          pendingQs[code] = dfrd;
          pub(name, {
            code: code,
            details: details
          });
        }
      } else {
        dfrd = $q.defer();
        dfrd.resolve({
          code: "not subscribed"
        });
      }
      return dfrd.promise;
    }

    this.res = function(data) {
      var dfrd = pendingQs[data.code];
      if (dfrd) {
        dfrd.resolve(data);
      } else {
        handlePreemptiveNotifications(data);
      }
    }

    function handlePreemptiveNotifications() {
      switch (data.code) {
        
      }
    }
  });

This method can facilitate multi-controller communication as a message bus. It leverages the promises API in Angular for notification callbacks. All controllers involved should subscribe to the service like so:

angular.module('test')
  .controller('Controller1', function($scope, messageBus) {
    var name = "controller1";

    function load() {
      var subscr = messageBus.sub(name);
      subscr.then(null, null, function(data) {
        handleRequestFromService(data);
      });
    }

    function handleRequestFromService(data) {
      if (data.code == 1) {
        data.count = 10;
        messageBus.res(data);
      }
    }

    $scope.$on("$destroy", function(event) {
      messageBus.unsub(name);
    });

    load();
  });

angular.module('test')
  .controller('Controller2', function($scope, messageBus) {
    var name = "controller2";

    function load() {
      var subscr = messageBus.sub(name);
      subscr.then(null, null, function(data) {
        handleRequestFromService(data);
      });
    }

    function handleRequestFromService(data) {
      
    }

    $scope.getHorseCount = function() {
      var promise = messageBus.req("controller1", 1, {});
      promise.then(function(data) {
        console.log(data.count);
      });
    }

    $scope.$on("$destroy", function(event) {
      messageBus.unsub(name);
    });

    load();
  });

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

Answer №1

Answer №2

Similar questions

Prevent user input in Vue.js until the value has been modified

Vue-moment displaying incorrect time despite timezone setting

Is your form complete?

Change the default values for grid column configurations in Ext JS globally

Conceal and reveal buttons at the same location on an HTML webpage

What is the solution to fixing the Vetur/Vuelidate issue where the error message "'validate' does not exist in type 'ComponentOptions<Vue [etc.]" is displayed?

Guide for creating a CORS proxy server that can handle HTTPS requests with HTTP basic authentication

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Retrieve JSON object by matching another JSON property

What is the reason for the malfunction in the login dialog?

Learn the process of uploading and converting multiple files into base64 using AngularJS

Prevent the reloading of the page by utilizing Ajax technology when submitting a form in Laravel

What is the best approach for invoking two services using a single provider factory?

Having trouble in React.js when trying to run `npm start` with an

Refreshing jQuery via Ajax Response

Upgrading to Angular 2: Utilizing ElementRef in ES5

Compare and contrast the functions of scrollToIndex and manual scrolling in a React Native FlatList

Discovering XMLHttpRequest Issues within a Chrome Application

The emission from Socket.io is originating from the recipient's browser without being transmitted to the sender's browser

Activating a function that requires locating a dynamically loaded element on the webpage using AJAX