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

Question

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 :

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.
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?

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

McFiddlyWiddly · Accepted Answer · 2016-07-05 19:43:11Z

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.

answered Jul 5, 2016 at 19:43

McFiddlyWiddly

58110 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Moser Over a year ago

Don't forget to add url: "/test/:id", to your state provider.

user2465164 Over a year ago

Have you found a way to pass data without having it reflect in the URL? Like @SteveMoser said, in order to access your $state.params, you must also have the query params setup in your URL. Is there a way to still pass and receive {id: self.value} without declaring /:id?

masitko · Accepted Answer · 2016-06-15 20:51:25Z

2

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 ) {
          .......

answered Jun 15, 2016 at 20:51

masitko

6097 silver badges9 bronze badges

Comments

E. Abrakov · Accepted Answer · 2016-06-15 20:37:07Z

1

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

answered Jun 15, 2016 at 20:37

E. Abrakov

4632 silver badges6 bronze badges

1 Comment

McFiddlyWiddly Over a year ago

Thanks, that was very helpful!

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related