Question

我将应用的导航从侧边菜单更改为底部标签。（tabs）。

它适用于父页面但不显示子页面的任何内容。

我按照初学者应用程序提供的代码以及doc。

所以我在这做了什么：

tabs.html：

<ion-tabs class="tabs-icon-only tabs-color-calm">

    <!-- Home Tab -->
    <ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" ui-sref="tab.users">
        <ion-nav-view name="tab-users"></ion-nav-view>
    </ion-tab>

    <!-- Conversations Tab -->
    <ion-tab title="Conversations" icon-off="ion-email" icon-on="ion-email" ui-sref="tab.conversations">
        <ion-nav-view name="tab-conversations"></ion-nav-view>
    </ion-tab>

    <!-- Profile Tab -->
    <ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" ui-sref="tab.profile">
        <ion-nav-view name="tab-profile"></ion-nav-view>
    </ion-tab>

</ion-tabs>

tab-users.html（父级）：

<ion-view view-title="List users">
    <ion-content>

        <div ng-repeat="user in users">
            <a class="item item-avatar" ui-sref="tab.user({id:user.id})">
                <h2>{{ user.firstname }} {{ user.lastname }}
            </a>
        </div>

    </ion-content>
</ion-view>

user.html（标签用户的子项，未显示的子项）：

 <ion-view view-title="{{ user.firstname }} {{ user.lastname }}">
    <ion-content>

        {{ user.firstname }} {{ user.lastname }}

    </ion-content>
</ion-view>

路线：

$stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
    })

    // Each tab has its own nav history stack:

    // Users (Home) :

    .state('tab.users', {
            url: '/users',
            views: {
                'tab-users': {
                    controller: 'NetworkController',
                    templateUrl: 'templates/tab-users.html'
                }
            }
        })
        .state('tab.user', {
            url: '/user/:id',
            view: {
                'tab-users': {
                    controller: 'UserController',
                    templateUrl: 'templates/user.html'
                }
            }
        })

    // Conversations :

    .state('tab.conversations', {
            url: '/messages',
            views: {
                'tab-conversations': {
                    controller: 'ConversationsController',
                    templateUrl: 'templates/tab-conversations.html'

                }
            }
        })
        .state('tab.conversation-messages', {
            url: '/messages/:id',
            view: {
                'tab-conversations':{
                    controller: 'MessagesController',
                    templateUrl: 'templates/conversation-messages.html'

                }
            }
        })

    // Profile :

    .state('tab.profile', {
            url: '/profile',
            views: {
                'tab-profile': {
                    controller: 'ProfileController',
                    templateUrl: 'templates/tab-profile.html'

                }
            }
        })
        .state('tab.profile-preferences', {
            url: '/profile/:slug',
            view: {
                'tab-profile': {
                    controller: 'PreferenceController',
                    templateUrl: 'templates/profile-preferences.html'

                }
            }
        })

    // Others :

    .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
    })

    .state('register', {
        url: '/register',
        templateUrl: 'templates/register.html'
    })

;

$urlRouterProvider.otherwise("/tab/users");

index.html：

<body ng-app="ionicApp" ng-controller="ApplicationController">

    <div ng-show="error.status == true" class="bar bar-subheader bar-error">
        <div class="error-bg"></div>
        <div class="statusText"><strong>Error ({{ error.code }}) :</strong> {{ error.statusText }}</div>
        <i class="icon ion-close-round" ng-click="error.status = false"></i>
    </div>

    <ion-nav-bar class="bar-calm">
        <ion-nav-back-button class="button-clear"><i class="ion-arrow-left-c"></i> Back</ion-nav-back-button>
        <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-archive"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

</body>

更新：

请注意，ui-sref正确生成到：/ tab / user / 15

的路由

Answer 1

有a working plunker

似乎只有错字（s）。

而不仅仅是一个！第一个（已在问题编辑中修复）

views : { 'tabs-users' ...}
应为 views : { 'tab-users' ...}

首发 tab- 而不是 tabs-

.state('tab.users', {
    url: '/users',
    views: {
        'tab-users': {
        ...

.state('tab.user', {
    url: '/user/:id',
    view: {
        // not working
        'tabs-users': {
        // should be
        'tab-users': {

因为目标名称是：

<ion-nav-view name="tab-users"></ion-nav-view>

第二个是......我们需要使用 views :{} 而非 view : {}

.state('tab.user', {
    url: '/user/:id',
    // wrong
    view: {
    // working
    views: {
        // not working
        'tabs-users': {
        // should be
        'tab-users': {

检查行动here

离子选项卡：未显示子视图

1 个答案: