5

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?

McFiddlyWiddly
  • 547
  • 10
  • 29
  • Possible duplicate of: http://stackoverflow.com/questions/28248236/angular-ui-router-passing-data-between-states-without-url – dYale Jun 15 '16 at 20:36

3 Answers3

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.

McFiddlyWiddly
  • 547
  • 10
  • 29
  • 3
    Don't forget to add `url: "/test/:id",` to your state provider. – Steve Moser Dec 19 '16 at 18:35
  • 1
    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? – user2465164 Jul 30 '18 at 18:57
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 ) {
          .......
masitko
  • 610
  • 7
  • 9
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})"

E. Abrakov
  • 463
  • 2
  • 6