AngularJS: Setting Global Variable AJAX

Question

I am looking for best practices with AngularJS: I need to share a json ajax response between nested controllers. Controller1->Controller2->Controller3

Right now I have a working version that simply sets a $scope.variable with the response in controller1, and the other controllers access it by calling the same variable.

I have tried creating a global service, but the problem is I make the ajax call in a controller, and before the ajax call is finished, the global variable defaults to null for all the other controllers.

I am just trying to understand what best approach is in this situation.

Thanks

http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js — hurricane, Nov 03 '15 at 13:27

score 1 · Answer 1 · answered Nov 03 '15 at 13:22

1

You can put the value in $rootScope.variable and after access it from any other controller (as $scope.variable)

answered Nov 03 '15 at 13:22

David Faure

1,336
14
25

score 1 · Accepted Answer · answered Nov 03 '15 at 13:39

Create publisher/subscriber service or factory and subscribe methods from your controller2 and 3 to data change. Just like this:

angular
  .module('')
  .factory('GlobalAjaxVariable', function() {
    var subscribers = [];

    function publish(data) {
      callbacks.forEach(function(clb) {
        clb(data);
      });
    }

    return {
      setData: function(ajaxData) {
        publish(ajaxData);
      },

      addSubscriber: function(clb) {
        subscribers.push(clb);
      }
    };
  });

This is exactly what I was looking for. Thanks Yuri. – l2silver Nov 05 '15 at 03:01 — l2silver, Nov 05 '15 at 03:01

AngularJS: Setting Global Variable AJAX

2 Answers2