Ionic - [ui.router] can't navigate nested states - angularjs

Question

I've been trying to make this work, I think I'm missing something but I don't know what. I've tried with absolute paths and same problem. Perhaps the way I'm trying to link the states?
Tree view goes like this:
- app
- app.category
- app.category.category-detail
I can navigate from app, to app.category but I can't go any further, here are my routes:
.state('app.category', {
url: "/category?catId",
views: {
'menuContent': {
templateUrl: "templates/category.html",
controller: "CategoryCtrl",
params: ['catId ']
}
}
})
.state('app.category.category-detail', {
url: "/category-detail",
views: {
'menuContent': {
templateUrl: "templates/category-detail.html",
controller: "DirectoryDetailCtrl",
params: [ 'catId' ]
}
}
})
This is my category.html
<ion-view>
<ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl">
<ion-nav-back-button class="button-clear" ng-click="myGoBack()">
<i class="ion-chevron-left blanco negrita"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="directory-content padding-3 bg-gris">
<ion-list>
<ion-item ng-repeat="category in categories" class="item-thumbnail-left tarjeta">
<a ui-sref="app.category.category-detail">
{{category.categoryName}}
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Now, if I inspect this website with Chrome Dev Tools I can see the next link is generated:
<a ui-sref="app.category.category-detail" href="#/app/category/category-detail?catId=1" class="">
Category 1
</a>
But the view is not being loaded, and no error is shown.
category-detail.html
<ion-view>
<ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl">
<ion-nav-back-button class="button-clear" ng-click="myGoBack()">
<i class="ion-chevron-left blanco negrita"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="category-content padding-3 bg-gris">
<h1>CATEGORY</h1>
</ion-content>
</ion-view>

Answer 1

There is one issue with params definition and second with view/target naming
I. params: ['catId] issue
Read more about params: {} object for example here:
Angular ui router passing data between states without URL
Notation used above:
params: [ 'catId' ]
is not valid anymore... Now we have more settings arround, e.g. the default value:
params : { cateId : null }
read more here
II. view naming
It also seems, that you are trying to target the same ui-view="menuContent" from 'app.category' and its child state 'app.category.category-detail' ... both with relative naming:
.state('app.category', {
url: "/category?catId",
views: {
'menuContent': { // no # = relative name
...
.state('app.category.category-detail', {
url: "/category-detail",
views: {
'menuContent': {
...
In case, that this target ui-view="menuContent" is defined in the 'app' state, we have to use absolute naming
.state('app.category.category-detail', {
url: "/category-detail",
views: {
'menuContent#app': {
...
The reason is, that name view notation without '#' is realtive and could be expressed as 'viewName#parentState'. So these are the same
.state('app.category', {
url: "/category?catId",
views: {
// relative
'menuContent': {
// absolute - targeting the same ui-view
'menuContent#app': { // this is absolute name
Try to get more here (not about ionic, but the UI-Router stuff behind is the same):
Angularjs ui-router not reaching child controller
Angular UI Router - Nested States with multiple layouts