Geek Answers Handbook

Ionic - [ui.router] cannot navigate nested states

I tried to make this work, I think I have something missing, but I do not know what. I tried with absolute paths and with the same problem. Maybe I'm trying to bind states?

The tree view is as follows:

- app
  - app.category
    - app.category.category-detail

I can move from app, to app.category, but I can’t move on, 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 check this site using the Chrome Dev tools, I see that the following link is being created:

    <a ui-sref="app.category.category-detail" href="#/app/category/category-detail?catId=1" class="">
         Category 1
    </a>

But the view does not load and the error is not displayed.

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>
+4
source share
1 answer

params /.

. params: ['catId]

params: {}, , :

Angular ui , URL

, :

params: [ 'catId' ]

... arround, . :

params : { cateId : null }

II.

, ui-view="menuContent" 'app.category' 'app.category.category-detail'... :

   .state('app.category', {
        url: "/category?catId",
        views: {
            'menuContent': { // no @ = relative name
             ...

    .state('app.category.category-detail', {
        url: "/category-detail",
        views: {
            'menuContent': {
            ...

, ui-view="menuContent" "app",

.state('app.category.category-detail', {
    url: "/category-detail",
    views: {
        'menuContent@app': {
        ...

, "@" "viewName @parentState". ,

.state('app.category', {
    url: "/category?catId",
    views: {
        // relative
        'menuContent': {
        // absolute - targeting the same ui-view
        'menuContent@app': { // this is absolute name

( , UI-Router ):

+3

More articles:


All Articles