I'm using the Ionic Framework with AngularJS and i'm very newbie at this point. All of my states are working except one and i couldn't find what is the problem. I can say my second slash navigation is not working. I couldn't navigate to the link ("#/tabs/dash/Restaurant/test/test2")
STATES:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.restaurantlist', {
url: '/dash/Restaurant',
views: {
'tab-dash': {
templateUrl: 'templates/restaurant-list.html',
controller: 'RestaurantListController'
}
}
})
.state('tab.restaurantmenu', {
url: '/dash/Restaurant/:restaurantId',
views: {
'tab-dash': {
templateUrl: 'templates/restaurant-menu.html',
controller: 'RestaurantMenuController'
}
}
})
.state('tab.restaurantmenu.food', {
url: '/dash/Restaurant/test/test2',
views: {
'tab-dash': {
templateUrl: 'templates/restaurant-food.html',
controller: 'RestaurantFoodController'
}
}
})
I have a problem at the last one[.state('tab.restaurantmenu.food'].
CONTROLLER:
.controller('RestaurantFoodController', function () {
console.log("RestaurantFoodController");
})
I just wanted to see, its working. So i cleared the function's inputs.
HTML: ( I have the templates/restaurant-food.html but it's from the templates/restaurant-menu.html for you guys can see the navigation)
<ion-view view-title="{{restaurant.name}}">
<ion-content>
<ion-list>
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in restaurant.menu" href="#/tabs/dash/Restaurant/test/test2">
<img src="../img/ionic.png" />
<h2>{{item.FoodName}}</h2>
<p>{{item.FoodDesc}}</p>
<span class="price">{{item.price}}</span>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
And again i forced the items to navigate to the link.
What can i do and what i must learn? If you guys know my problem, could you show me too?
There is a wroking plunker, where even this link is working
<a href="#/tabs/dash/Restaurant/test/test2">
The point is - we need a target for our super child state.
It means that its parent view templateUrl: 'templates/restaurant-menu.html' - must contain ui-view=""
<div ui-view="child-view" >
And then our super child state needs few adjustments. Url is inherited from parent, so only the last part should be added. Also, because our parent has named target child-view - we should use that as view name:
.state('tab.restaurantmenu.food', {
//url: '/dash/Restaurant/test/test2',
url: '/test2',
views: {
'tab-dash': {
'child-view': {
templateUrl: 'templates/restaurant-food.html',
controller: 'RestaurantFoodController'
},
}
})
Check it here
In case, we would like this state's view to be injected into 'tab-dash'
we have to adjsuted like this:
.state('tab.restaurantmenu.food', {
url: '/test2',
views: {
//'child-view': {
'tab-dash@tab': {
templateUrl: 'templates/restaurant-food.html',
controller: 'RestaurantFoodController'
},
}
})
The point is, we want to target state "tab", so the name of the view target is the view name and the state name 'viewName@stateName'. Check the doc:
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename
, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
There is a forked version with this solution
Summary: Child states are using relative names to target parent. Child states inherit url part. What Do Child States Inherit From Parent States?