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?

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?

• javascript
• angularjs

• Possible duplicate of: stackoverflow./questions/28248236/… – dYale Commented Jun 15, 2016 at 20:36

3 Answers 3

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.

Service still seems to be your best option to share info between two states. If you need any state information in your service you can just inject $state into it:

......
.service('SomeService', [
      '$state', 
        function ( $state ) {
          .......

I think you can pass an image id from state 1 to state 2, and get it in state 2 controller:

$stateProvider
.state('state', {
    url: "/test/:id",
    templateUrl: 'template.html',
    controller: function ($stateParams) {
        console.log($stateParams.id);
    }
})

and the link from the first page ui-sref="state({id:42})"