Проблема с ионной навигацией

Я пытаюсь разработать навигацию i ionic следующим образом

AppCtrl для входа или меню

Затем из меню в «Продукты» или «Заказы» или обратно в «Войти».

Мой app.html такой

<ion-nav-view name="appContent">
</ion-nav-view>

Мой menu.html, как это

<ion-view>
    <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button>
                </ion-nav-back-button>
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar-stable">
                <h1 class="title"></h1>
            </ion-header-bar>
            <ion-content>
                <ion-list>
                    <ion-item nav-clear menu-close href="#/app/products">
                        Products
                    </ion-item>
                  <ion-item nav-clear menu-close href="#/app/orders">
                        Orders
                    </ion-item>
                    <ion-item nav-clear menu-close ng-click="logout()">
                        Logout
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

И мои конфигурации состояния такие

$stateProvider

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "app/views/app.html",
        controller: 'AppCtrl'
    })

    .state('app.login', {
        url: "/login",
        views: {
            'appContent': {
                templateUrl: "app/views/login.html",
                controller: 'LoginCtrl'
            }
        }
    })

    .state('app.menu', {
        url: "/menu",
        views: {
            'appContent': {
                templateUrl: "app/views/menu.html",
                controller: 'MenuCtrl'
            }
        }
    })

    .state('app.products', {
        url: "/products",
        views: {
            'menuContent': {
                templateUrl: "app/views/products.html",
                controller: 'ProductsCtrl'
            }
        }
    })

    .state('app.productdetail', {
        url: "/projects/:productid",
        views: {
            'menuContent': {
                templateUrl: "app/views/productdetail.html",
                controller: 'ProductDetailCtrl'
            }
        }
    });

В AppCtrl я перехожу к входу или меню.

Он успешно переходит к menu.html,

После этого, когда я выбираю продукты или заказы, дальнейшая навигация не осуществляется.

Я заметил, что представление навигации menuContent размещается внутри представления навигации appContent.

Поддерживает ли ionic такую ​​иерархическую навигацию?

Пожалуйста, найдите codepen здесь code


angularjs angularjs-routing ionic
person Jana    schedule 04.03.2015    source источник
comment
Пожалуйста, создайте планкер для всего кода, который вы разместили, чтобы можно было воспроизвести тот же сценарий.,   -  person Manish Kr. Shukla    schedule 04.03.2015
comment
Спасибо, это codepen.io/anon/pen/ByPdeg.   -  person Jana    schedule 04.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

При использовании такого рода иерархических представлений нам нужно указать, в каком состоянии представление должно отображаться. Изменение приведенной ниже строки кода в вашем примере приведет к правильной загрузке страницы «Продукты».

 .state('app.products', {
    url: "/products",
    views: {
        '[email protected]': {
            templateUrl: "templates/products.html",
            controller: 'ProductsCtrl'
        }
    }
});

Обратите внимание на изменение имени представления, [email protected] это укажет маршрутизатору отображать представление продуктов в состоянии меню. Подробнее об этом читайте в оригинальной документации https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

person Swaminathan Vetri    schedule 04.03.2015