CODEWITHSUNDEEP
angularjsangular-ui-routerangular-uiionic-framework
Brieuc
Brieuc

Reputation: 4114

Ionic tabs : child view not showing

I changed the navigation of my app from side menu to bottom tabs. (tabs).

It is working for the parent pages but not showing anything for the children pages.

I followed the code given by the starter app and also from the doc.

So here what i did :

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 (Child of tab-users, the one not showing) :

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

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

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

Routes :

$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>

UPDATE :

Note that ui-sref is correctly generating the route to : /tab/user/15

Upvotes: 1

Views: 4296

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker

It seems there is/are just a typo(s).

And not just one! The first (already fixed in an edit of question)

  • views : { 'tabs-users' ...}
  • should be views : { 'tab-users' ...}

The starting tab- instead of tabs-

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

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

Because the target name is:

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

The second is ... we need to use views :{} not view : {}

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

Check it in action here

Upvotes: 3

Related Questions