Run-time control in angularjs

Question

I have inherited the angular application and should now make a change.

As part of this change, some data must be installed in one controller, and then used from another. Therefore, I created a service and one controller wrote data to it, and one controller read data from 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 use data in pageSubController , it is always undefined.

How can I make sure pageController runs before pageSubController ? Or is this even the right question?

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 }; }) 

Answer 1

If you want your controller to wait for a response, you will receive a response from another controller. You can try using the $broadcast option in angularjs.

In pagecontroller you have to broadcast your message "dataAdded", and in message manager you have to wait for the message using $ scope. $ on, and then handle the 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.... }) 

Answer 2

I would swap your service to return a promise of data. When asked if the data has not been installed, just return the promise. Later, when another controller sets the data, enable the previous promises with the data. I used this template to process API caching results in such a way that the controllers do not know or do not care whether I retrieved 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 fixed when the data is actually installed.

 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; }