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?
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.
1 Like
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.
2 Likes
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
1 Like