javascript - How can I pass data between states with angular ui-router?

I originally did not intend on doing the project with ui-router (just got to know about it 2 days ago), so I'm quite new at this.

What I have for this issue is :

1. Template for list of images, shown using ng-repeat, and getting img-src from a service called in the controller. The service gets the source from a json file.

   
   
   
   
   
   



2. Template for image editor. The controller for this should get the image source of the image that was clicked in the image list.

How do I pass the image source from one state (the image list) to the another state (the image editor)?

I was using a service to do that when I was assuming that I won't use ui-router and its states. How do I do this with states?

Answer

So, I found a simple and efficient way to pass data, and this has worked for all of my cases till now. (including scenarios different from the one mentioned in the original question)

In the controller of the first state, state1, I can just call the function

$state.go('state2', {id: self.value} );

And in state2, I can obtain the value by the following code:

this.state2value = $state.params.id;

So can pass value from one state to another, and retrieve it through state params.

Note: you should inject $state, and $stateParams into both controllers.