Ionic left sidemenu does not toggle open

0
votes

Hi I'm relatively new to ionic and I'm trying to get an app running with both a side-menu and a tab bar. Currently the tab bar is working fine just the left side menu does not open when I click the icon. For most of the app I've just been working off of the tutorials on the ionic website.

I am adding google maps to the tabs and I am aiming to have facebook login for the sidebar but the main issue is the tab isn't toggling.

app.js

    $stateProvider

    .state('menu', {
      url: "/menu",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('menu.playlists', {
      url: "/playlists",
      views: {
        'menu' :{
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })  

    // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
    })

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

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

tab-map.html

<ion-view view-title="Safety First">
  <ion-nav-buttons side="left" ng-controller="AppCtrl">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content ng-controller="MapCtrl">
    <div id="map" data-tap-disabled="true"></div>
  </ion-content>
</ion-view>

menu.html

<ion-side-menus>

  <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="menu" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <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 href="#/app/about">
          About
        </ion-item>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

Here is an image of the app's main page

enter image description here

When I click the submenu icon it does not toggle the submenu. The odd part is that If I navigate the app to http://localhost:8100/#/menu/playlists the toggling is fine.

Any suggestions on why nothing is really firing on the click? Perhaps its an issue of which controller is acting at the time?

1
javascriptionic-frameworkionic-view
Not sure if it's the same as my case. It happens to me for similar case. My sidemenu shows but it shows behind the current page. What I've done is I show a modal on a page, then from that modal I push another page. NavController for modal and page is not the same. If you need to navigate towards page from modal, I suggest to send in page's NavController and manage it via that object in modal class. Note: ionic 2 rc-1 - haxpor

1 Answers

0
votes

You have to call the correct function. I'm assuming login() is located inside AppCtrl controller. Because of that, ng-click can't find the function, unless you tell it where it's located. Since AppCtrl is responsible for menu.html, you have to call it like this:

ng-click="this.login()"