Obtaining id passed in state | URL


#1

I may have completely missed it in the tutorial, however I’m trying to change some functionality based on the id being passed through the state url.

state('app.profile', {
    url: "/profile/:profile_id",
    views: {
      'menuContent': {
        templateUrl: "pages/profile.html",
        controller: 'ProfileCtrl'
      }
    }
  });

So, for example if I point to /app/profile/5

How do I get the value of “5” in the controller?


#2

You can obtain profile_id by injecting $stateParams into your controller and then accessing the property like so $stateParams.profile_id.

If you are using the ID to load an object from a remote source, look into using a resolve on your state route as this will ensure the object is available before transitioning to that state.


#3

For more info on the resolve part: https://github.com/angular-ui/ui-router/wiki#resolve

The UI Router wiki is also a good starting point if you’re struggling with states.


#4

defined the state parameter, in this example it is itemId

   .state('wmapp.dishDetail', {
        url: "/dishDetail/:itemid",
        views: {
          'menuContent': {
            templateUrl: "dishDetail.html",
            controller: 'DishDetailController'
          }
        }
      });

Now in the controller, you have access to the itemId through the $stateParams

.controller('DishDetailController', function($scope, $stateParams, DataService) {

  console.log("$stateParams " + JSON.stringify($stateParams));

  // SEE HERE, ACCESSING STATEPARAMS
  DataService.currentItem = $stateParams.itemid || DataService.currentItem;

  // get item from DataService
  DataService.getData().then(function(_data){
      console.log(_data[DataService.currentItem]);
      $scope.currentItem  = _data[DataService.currentItem];
  })
})

In your view template, the $stateParams itemId is defined on the url as {{$index}}

    <ion-content class="padding">
      <ion-list>
        <ion-item ng-repeat="dish in dishList" href="#/wmapp/dishDetail/{{$index}}">
          <h1 >{{dish.nameEnglish}}</h1>
          <h2 >{{dish.nameLocal}}</h2>
          <p >{{dish.description}}</p>
        </ion-item>
      </ion-list>
    </ion-content>

See complete codePen here http://codepen.io/aaronksaunders/pen/KwbJGj?editors=101