$stateParams, how to pass value from one state to another

Question

On a ionic/Angularjs project, When one item is clicked in a list in a state, how do I set a rule to pull data on the next view thanks to the itemID of the item clicked in this list ?

The code is too long to paste here, but you 'll get the idea in the jsfiddle

I want from clicking on items in gray color in the list, update informatino of the detaild view of that item (in blue background).

HTML of list view :

        <h1 class="featured_in_mag_name">Dishes in that category:</h1>        
    <ion-item ng-repeat="dish in dishList | selectedDishType:selection ">
       <article class="item_frame">
          <h4 class="item_name_english">{{dish.nameEnglish}}</h4>
          <p class="item_name_local_language">{{dish.nameLocal}}</p> 
        </article>
        <!--main article frame 1 -->
    </ion-item>
</ion-list>

HTML of detailed view

<ion-view view-title="Dish " >
   <h1 class="featured_in_mag_name">Selected dish - detailed view:   </h1>    
    <ion-content>
   <article class="detailed_view">
      <h1 class="item_name_english">{{dish.nameEnglish}}</h1>
      <p class="item_name_local_language">{{dish.nameLocal}}</p>
      <p class="item_name_local_language">{{dish.nameLocal}}</p>    
      <p class="item_name_local_language">{{dish.description}}</p>
      <p class="item_name_local_language">{{dish.region}}</p> 
      <p class="item_name_local_language">{{dish.country}}</p>
    </article>              
  </ion-content>
</ion-view>

score 2 · Answer 1 · answered Mar 27 '15 at 03:18

One way to do this is using the $state service. $state.go will transition to the new state and can accept parameters for that state. These parameters can then be accessed in the new state's controller through $stateParams.

For your example it would be something like this

In the list view:

<ion-item ng-repeat="dish in dishList | selectedDishType:selection " ng-click="$state.go('detailsState', { id: dish.itemID })">

Then, in the next state you can grab the id in your controller from $stateParams like this:

function controller($stateParams) {
    var itemId = $stateParams.id;
}

Keep in mind that to have this work you will have to setup your state with a route like this:

$stateProvider.state("detailsState", {
   url: "/details/:id"
});

All of these are a part of the ui.router module. For more info see http://angular-ui.github.io/ui-router/site/#/api/ui.router

thanks a lot, I had managed to find and fix the issue before your answer, but definitely sounds like a good option too — lauWM, Mar 27 '15 at 12:39

score 0 · Answer 2 · answered Mar 23 '15 at 18:11

0

I'd say you basically should :

pass the id in the url (process depending on which router you're using), example /bear/:id
let your router process the redirection
then in the detailled-view controller re-fetch the object from your storage (usually through a service), and load it into your template via $scope

This way, you'd get 2 independant, pretty stateless, routes linked to each other. Stateless here means that if you access, say, /bear/2, even just typing the url, you will get the view coresponding to the resource bear 2, which is strongly semantic, just like REST endpoints.

In addition, you can note that the pattern you describing is called Master-Details =)

answered Mar 23 '15 at 18:11

Cyril CHAPON

3,556
4
22
40

thanks Cyril (you must be french!?) I had found this pklr http://embed.plnkr.co/DBSbiV/preview , will dig into it and hopefully implement solution correctly.. – lauWM Mar 23 '15 at 18:39
Yep French. I'll post some code later. But before I had to check if I'm realy talking about what you need. Was I ok ? – Cyril CHAPON Mar 23 '15 at 18:44
(me too!) looking at it this morning, but new in both js/angularjs/ionic so takes a bit of time .. – lauWM Mar 24 '15 at 08:20
Just checked the plunker, I had never seen this kind of (one pager) implementation using `$state` . But this is basically the same approach that I described, implemented with _ui-router_ – Cyril CHAPON Mar 24 '15 at 08:57
yep looks like. I am currently looking at http://stackoverflow.com/questions/21988151/aungular-ui-router-child-using-parents-view also using $state but somehow do not manage to adapt the solution ... may be because of te filter set in the master controller... – lauWM Mar 24 '15 at 09:24

$stateParams, how to pass value from one state to another

2 Answers2