CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-ui-router
mtpeoples
mtpeoples

Reputation: 37

Ionic ion-side-menus produces blank page when combined with ui-router child states

As the title states, I am having issues with using Angular ui-router together with ion-side-menus. I've seen several other very similar issues but I can't seem to identify my issue.

Before I had my base state load into ion-nav-view without using a parent state and the side bar would show up. However as soon as I changed states the side bar stopped working. Since adding the parent state app and making feed a child of it has my app showing a completely blank screen, and not running any code from either controller.

Starting with index.html my body tag is just the <ion-nav-view> tag:

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

menu.html contains the html for the side bar menu: 

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close>
          Tab 1
        </ion-item>
        <ion-item nav-clear menu-close>
          Tab 2
        </ion-item>
        <ion-item nav-clear menu-close>
          Some tab
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Finally the piece that ties things together, is the router:

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

$urlRouterProvider.when('', '/feed');
$urlRouterProvider.otherwise('/feed');

$stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'views/menu/menu.html',
    controller: 'MenuController'
  })

$stateProvider
  .state('app.feed', {
    url: '/feed',
    views: {
      'menuContent': {
        templateUrl: 'views/feed/feed.html',
        controller: 'FeedController',
        controllerAs: 'ctrl',
        authenticate: true
      }
    }
  });

//Other states

I appreciate any insight anyone can provide!

Upvotes: 0

Views: 208

Answers (1)

mtpeoples
mtpeoples

Reputation: 37

The issue was that $urlRouterProvider.otherwise() was pointing to /feed when it should have been /app/feed since it technically a child state.

Upvotes: 0

Related Questions