ionic side menu does not appear

10,242

Wow I finally worked this out after losing a day to skimpy documentation. The tutorials and examples on ionic framework website seem to be seriously outdated.

First, I created a factory to provide the list items for the side menu:

 .factory('MenuService', function() {
  var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];

  return {
    all: function() {
      return menuItems;
    }
  }
})

Then, I created a menu controller:

.controller('MenuController', function ($scope, $location, MenuService) {
  // "MenuService" is a service returning mock data (services.js)
  $scope.list = MenuService.all();
});

I replaced the code in the body of the index.html page with this:

    <div ng-controller="MenuController">
      <ion-side-menus>

          <!-- Center content -->
          <ion-pane ion-side-menu-content>
              <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>

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

          <!-- Left Side Menu -->
          <ion-side-menu side="right">
              <ion-header-bar class="bar bar-header bar-assertive">
                  <h1 class="title">Menu</h1>
              </ion-header-bar>
              <ion-content has-header="true">
                  <ion-list>
                      <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
                          <!-- <i ng-class="item.iconClass"></i> -->
                          {{item.text}}
                      </ion-item>
                  </ion-list>
              </ion-content>
          </ion-side-menu>
      </ion-side-menus>
  </div>

The factory took the place of the sidemenus.html that I had in the template directory. Also, the ".state" stuff was not needed at all.

10,242

Author by

user3843276

Updated on June 06, 2022

Comments

user3843276 almost 2 years

So I'm trying to use ionic to build a simple mobile app. I've looked at ionic tutorials and googled quite a bit but I'm not quite getting it. I have created a nav bar that shows up on every page by adding this code to the index.html page:

   <body ng-app="starter">
   <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
  </body>

I added a navicon to the right side of the nav bar on one of my pages with this code:

<ion-view title="Hanzi Options">
  <ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-navicon" >
    </button>
  </ion-nav-buttons>
  <ion-content>...etc

I would like to be able to click on the navicon and see a side menu containing a basic html page called sidemenu.html that is located in the templates folder. Here is the start of the code in that file:

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></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">Navigate</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/friends">
          Friends
        </ion-item>...etc

I added this code to my app.js file in the .config section:

.state('app.sidemenu', {
  url: "/sidemenu",
  abstract: true,
  templateUrl: "templates/sidemenu.html",
  controller: 'NavCtrl'
})

and an empty NavCtrl to my controllers.js file:

.controller('NavCtrl', function($scope) {
});

I suspect that maybe my .state code isn't quite right but not sure. Also, do I need to add something to the NavCtrl controller to open/close the side menu? Many thanks in advance!

user3843276 almost 10 years

OK I figured it out but stackoverflow won't let me answer my own question until tomorrow. The .state stuff is unnecessary. I did it all with a factory, a controller, and some markup in the index.html file. I'll post the answer tomorrow. Long story short, the ionic framework tutorials and examples are not helpful...