离子标签：child 视图未显示

Question

我将我的应用程序的导航从侧面菜单更改为底部选项卡。 (tabs).

它适用于 parent 个页面，但未显示 children 个页面的任何内容。

我遵循了入门应用程序和 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 (Parent) :

<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（tab-users 的 Child，未显示的那个）：

 <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

似乎 is/are 只是一个 打字错误 (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

离子标签：child 视图未显示

Ionic tabs : child view not showing

angularjs

angular-ui

angular-ui-router

ionic-framework

ionic