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

How to associate an object with a component in Angular2/TypeScript using HTTP

Modify the contents of the 'data-content' area in the popover

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

sending a variable from routes.js to my .ejs template

Click event from Angular Material menu is triggered twice on mobile devices

Are there ways to incorporate a variable within a Regular Expression in Javascript?

What's the reason why Angular stops flickering with the use of "/" in href?

Navigating in Angular with parameters without modifying the URL address

Setting relative paths in Ui-Router: a beginner's guide

What is the best way to fulfill a promise after a CSV file has finished being read?

Having trouble getting the HTML5 Video to play using the AngularJS ng-src tag?

Working with arrays and data to populate tables and cross tables using a single Eloquent Model in Vue and Laravel

Angular/JS - setTimeout function is triggered only upon the occurrence of a mouse click

`Datatables sorting feature for British date and time`

The dilemma of selecting objects in Three.js

Unable to connect to server using React-Native fetch. Localhost is not being used

Authenticating the identity of the client application - the client is currently within the browser

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

Unable to reference a property or method in Vue.js and Vuetify due to an issue with the <v-btn-toggle> button causing an error

AngularJS - seamless navigation to url with hash symbol