Controlling order of execution in angularjs

Question

I have inherited an angular app and now need to make a change.

As part of this change, some data needs to be set in one controller and then used from another. So I created a service and had one controller write data into it and one controller read data out of it.

angular.module('appRoot.controllers')

.controller('pageController', function (myApiService, myService) {
    // load data from API call
    var data = myApiService.getData();

    // Write data into service
    myService.addData(data);
})

.controller('pageSubController', function (myService) {
    // Read data from service
    var data = myService.getData();

    // Do something with data....
})

However, when I go to use data in pageSubController it is always undefined.

How can I make sure that pageController executes before pageSubController? Or is that even the right question to ask?

EDIT

My service code:

angular.module('appRoot.factories')

.factory('myService', function () {
    var data = [];

    var addData = function (d) {
        data = d;
    };

    var getData = function () {
        return data;
    };

    return {
        addData: addData,
        getData: getData
    };
})

Can we have a look at myService definition? Also your html — Rahil Wazir
– Rahil Wazir, Commented Nov 6, 2014 at 11:14
@RahilWazir added. usage of the data is actually in ng-table params — tom redfern
– tom redfern, Commented Nov 6, 2014 at 11:20
It would be great if you include your html so we will know how you have used the controllers. — Rahil Wazir
– Rahil Wazir, Commented Nov 6, 2014 at 11:23

Kailas · Accepted Answer · 2016-04-05 06:01:13Z

6

If you want your controller to wait untill you get a response from the other controller. You can try using $broadcast option in angularjs.

In the pagecontroller, you have to broadcast your message "dataAdded" and in the pagesubcontroller you have to wait for the message using $scope.$on and then process "getData" function.

You can try something like this :

angular.module('appRoot.controllers')
.controller('pageController', function (myApiService, myService,$rootScope) {
    // load data from API call
    var data = myApiService.getData();

    // Write data into service
    myService.addData(data);
    $rootScope.$broadcast('dataAdded', data);
})

.controller('pageSubController', function (myService,$rootScope) {
    // Read data from service
    $scope.$on('dataAdded', function(event, data) {
        var data = myService.getData();
    }

    // Do something with data....
})

edited Apr 5, 2016 at 6:01

Kailas

7,6183 gold badges50 silver badges65 bronze badges

answered Nov 6, 2014 at 11:57

Sangeetha Pelluri

827 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom redfern Over a year ago

Thanks - I'll have a play with this and let you know

tom redfern Over a year ago

This was just what I needed - a global event which I can hook into. Thanks!

Peter Lyons · Accepted Answer · 2014-11-06 11:30:35Z

3

I would change your service to return a promise for the data. When asked, if the data has not been set, just return the promise. Later when the other controller sets the data, resolve the previous promises with the data. I've used this pattern to handle caching API results in a way such that the controllers don't know or care whether I fetched data from the API or just returned cached data. Something similar to this, although you may need to keep an array of pending promises that need to be resolved when the data does actually get set.

function MyService($http, $q, $timeout) {
  var factory = {};
  factory.get = function getItem(itemId) {
    if (!itemId) {
      throw new Error('itemId is required for MyService.get');
    }
    var deferred = $q.defer();
    if (factory.item && factory.item._id === itemId) {
      $timeout(function () {
        deferred.resolve(factory.item);
      }, 0);
    } else {
      $http.get('/api/items/' + itemId).then(function (resp) {
        factory.item = resp.data;
        deferred.resolve(factory.item);
      });
    }
    return deferred.promise;
  };

  return factory;
}

answered Nov 6, 2014 at 11:30

Peter Lyons

147k32 gold badges285 silver badges281 bronze badges

4 Comments

tom redfern Over a year ago

Thanks for your response - though I'm not making the api call from the service, just using it to store some data in. Is this not a recommended approach?

Rahil Wazir Over a year ago

It doesn't seem OP sending any server-side request to retrieve the data. Its just a simple assignment of data to properties.

Justin Morgan Over a year ago

Am I missing something, or is your call to $timeout redundant? You should be able to just call deferred.resolve(factory.item) and return the promise.

Peter Lyons Over a year ago

It's pessimistic about releasing zalgo by sometimes having same-tick behavior and sometimes having future-tick semantics. This guarantees future-tick semantics 100% of the time.

Collectives™ on Stack Overflow

Controlling order of execution in angularjs

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related