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

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>

score 3 · Accepted Answer · edited May 23 '17 at 10:33

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):

Adding the absolute name and changing the `params` option worked, thank you Radim. I'll read more about the ui-router to prevent this errors appear again in the future :) — Ariel, Jun 22 '15 at 17:42

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

1 Answers1

Angular ui router passing data between states without URL