I am working on a application that will use multi level routes. Its works fine upto two levels but not on the third level. My third level is a dynamic property to show a detail view.
Here is my router code
‘use strict’;
var app = angular.module(‘appname’, [‘ionic’]);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘intro’, {
url: ‘/’,
templateUrl: ‘intro.html’,
controller: ‘IntroCtrl’
})
.state(‘tabs’, {
url: ‘/tabs’,
abstract: true,
templateUrl: ‘tabs.html’
})
.state(‘tabs.home’, {
url: ‘/home’,
views: {
‘home-tab’: {
templateUrl: ‘home.html’,
controller: ‘HomeCtrl’
}
}
})
.state(‘tabs.top’, {
url: ‘/top’,
views: {
‘top-tab’: {
templateUrl: ‘top.html’,
controller: “TopTagsCtrl”
}
}
})
.state(‘tabs.fav’, {
url: ‘/fav’,
views: {
‘fav-tab’: {
templateUrl: ‘fav.html’,
controller: “FavoriteCtrl”
}
}
})
.state(‘tabs.fav.id’, {
url: ‘/:id’,
views: {
‘fav-tab’: {
templateUrl: ‘tags.html’,
controller: function ($scope, $stateParams) {
console.log(‘$stateParams’, $stateParams);
}
}
}
})
.state(‘instatags.custom’, {
url: ‘/custom’,
views: {
‘custom-tab’: {
templateUrl: ‘custom.html’,
controller: ‘CustomCtrl’
}
}
});
// if none of the above are matched, go to this one
$urlRouterProvider.otherwise(‘/’);
});
The favorite view is a list. What i want is if the list is tap then move to the details view
Edit
<ion-item class="item item-icon-left item-icon-right" ng-repeat="item in items" item="item" href="#/tabs/fav/{{item.id}}"> <i class="icon ion-ios7-star-outline"></i> {{ item.name }} </ion-item>
</ion-list> </ion-content> </ion-view>
The url’s should look like
List view
/tabs/fav
Details view
/tabs/fav/1
/tabs/fav/2