CODEWITHSUNDEEP
javascriptangularjstabsionic-framework
mcgrandlej
mcgrandlej

Reputation: 35

Ionic Not Loading Tab Page

I've been bashing my head over this problem for a few days, I know it's something simplistic and that I should have noticed long ago, but for the life of me I can't figure it out.

Simple problem: From the start page, clicking the icon for my tab switches to the correct url, but does not load the page content or controller.

I've started fresh from the Ionic "tabs" template and have only changed what is necessary (or so I believe).

Any help is appreciated.

app.js

// Removed comments
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Removed comments, though I did check the github page given
  $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:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
    url: '/chats',
    views: {
      'tab-chats': {
        templateUrl: 'templates/tab-chats.html',
        controller: 'ChatsCtrl'
      }
    }
  })
  .state('tab.chat-detail', {
    url: '/chats/:chatId',
    views: {
      'tab-chats': {
        templateUrl: 'templates/chat-detail.html',
        controller: 'ChatDetailCtrl'
      }
    }
  })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })

  .state('tab.quickscan', {
    url: '/quickscan',
    templateUrl: 'templates/tab-quickscan.html',
    controller: 'QuickScanCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

controllers.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  // Removed comments

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
})

.controller('QuickScanCtrl', function($scope) {
  console.log("QuickScanCtrl loaded");
});

tabs.html

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

  <!-- QuickScan Tab -->
  <ion-tab title="Quick Scan" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/quickscan">

  </ion-tab>

</ion-tabs>

tab-quickscan.html

<ion-view view-title="Quick Scan">
  <ion-content class="padding">
    <h2>Welcome to QuickScan</h2>
    <p>
    This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
    </p>
    <p>
      To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
    </p>
    <p>
    If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
    </p>
    <p>
      For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available.
    </p>
  </ion-content>
</ion-view>

Upvotes: 1

Views: 1376

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16710

The ionic tab application uses named views (e.g. name="tab-dash" , name="tab-account" etc.) to render the views for a given state into the tabs. For this to work you need 2 things:

First you need to specify your state as a named view in state configuration as below:

.state('tab.quickscan', {
  url: '/quickscan',
  views: {
    'tab-quickscan': {
        templateUrl: 'templates/tab-quickscan.html',
        controller: 'QuickScanCtrl'
    }
  }
})

Second, you need to specify your ion-nav-view as a named view container as below:

<ion-tab title="Quick Scan" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.quickscan">
  <ion-nav-view name='tab-quickscan'></ion-nav-view>
</ion-tab>

Upvotes: 0

liuwenzhuang
liuwenzhuang

Reputation: 966

First, change tab.quickscan statement in app.js to below:

.state('tab.quickscan', {
    url: '/quickscan',
    views: {
        'tab-quickscan': {
            templateUrl: 'templates/tab-quickscan.html',
            controller: 'QuickScanCtrl'
        }
    }
})

And then change Quick Tab statement in tabs.html:

<ion-tab title="Quick Scan" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/quickscan">
    <!-- name value is defined in `tab.quickscan` statement -->
    <ion-nav-view name='tab-quickscan'></ion-nav-view>
</ion-tab>

Upvotes: 1

Related Questions