Sharing data between controllers with ui-router

Question

Is there another way other than creating a factory or service todo this?

Answer 1

There are a few ways to share data between state controllers:

1. Put the data on a common ancestor's $scope, so all the controllers in question see the data on their local scopes.
2. Use a global service (as you said).
3. Create a "local service" (using the resolve config) in a common ancestor's state.
4. Pass the data as $stateParams (useful only in some very specific situations).

The first one is usually the best bet, as putting the data on $scope also allows you to easily $watch the changes.

Answer 2

Well this may not be the best but it works for me pretty well in an app i develop, and the trick was using the local storage, for example in my search view:

controller: 'SearchCtrl'
state: 'search'

i get a list of results from a web service and stored them like this:

localStorage.setItem('results', angular.toJson(results)); // assuming a json response

then i made a common transition to another state $state.transitionTo('results'):

controller: 'ResultCtrl'
state: 'results'

and finally get the results from the localStarage in a scope variable of ResultCtrl:

$scope.results = angular.fromJson(localStorage.getItem('results'));

Answer 3

You can have your routes like this:

.state('parent', {
  url: "/parent",
  abstract: true,
  controller: 'ParentCtrl'
})

.state('app.foo', {
  url: "/foo",
  views: {
    'menuContent' :{
      templateUrl: "templates/foo.html",
      controller: 'FooCtrl'
    }
  }
})

And access from FooCtrl the functions and data that are in ParentCtrl