How to access resolved date within root scope

Question

In my app I have states that fetch various resources from server using resolve clause.

I also have a global controller that need access to these resources. For example, consider a breadcrumb that needs to show some data of these resource.

How can I access these resources from the global controller? Even if I have the state object at hand, I couldn't figure how to extract the resolved properties.

EDIT: I'm using ui-router package for routing.

Answer 1

The idea is to add a resolve key that depends on the required data (see breadcrumb in code below). When the function of this key is invoked, we can be assured that our data item is ready for use. Then we put it on the state (data property).

.state('some.item.detail.state', {
  url: '/:itemId',
  resolve: {
    item: function($stateParams, MyServerResource) { 
            return MyServerResource.get({itemId: $stateParams.itemId}).$promise;
          },
    breadcrumb: function(item) {
                  this.data = item;
                }
  },
  templateUrl: 'myTemplate.html'
}

To consume the data in the global controller, we simple examine $state.current.data.

Answer 2

As I understand it you have something like this:

  .when('/', {
    controller: 'HomeCtrl',
    templateUrl: 'home.html',
    resolve: {data: someDataFetcher}
  })

And you need to access the data in a global controller. I would have to see a code example to perfectly understand what you want, but I would suggest using a shared service.

function HomeCtrl (data, myDataService) {
  myDataService.data = data;
}

function GlobalCtrl (myDataService) {
  myDataService.data // => The data
}

A service has only one instance so it is easy to use that to share state and resources across controllers.

Hope this helps.

update:

Create a resolve closure:

var myResolveClosure = function (resolver) {
    // Return a wrapper around the resolver
    return function (globalController, $q) { 
      var deferred = $q.defer();
      resolver($q).then(function (data) {
        globalController.addData(data);
        deferred.resolve(data);
      }).catch(function () {
        deferred.reject();
      });
      return deferred.promise;
    }
}

  .when('/', {
    controller: 'HomeCtrl',
    templateUrl: 'home.html',
    resolve: {
     data: myResolveClosure(function ($q) {
       var deferred = $q.defer();
       // do something and resolve with the data
       return deferred.promise;
     })
    }
  })

So basically you pass in the specific resolver you need to fetch that data. The "myResolveClosure" will wrap a a function around the resolver, passing in $q to the specific resolver to do some fetching. It will then take the data resolved from the specific resolver and pass it into the global controller, then resolve itself so that any controller you specified also will get the data.

Hope this makes sense :-)