CODEWITHSUNDEEP
javascripthtmlangularjsionic-frameworkangular-ui-router
Greg Sithole
Greg Sithole

Reputation: 145

Ionic Side Menu Issue

I'm having an issue with my homepage and side-menu, whenever I try to enter the home page it bounces back to my "otherwise" view. Whenever I remove the implementation of the menu, in the app.js, my homepage works fine. Instead of using the starter-menu https://github.com/driftyco/ionic-starter-sidemenu, I decided to use a blank version, so that I can learn as much as I need to know about Ionic... The following is my code.

app.js

   .config(function($stateProvider, $urlRouterProvider)
  {
    $stateProvider
      .state('intial', {
        url: '/',
        templateUrl: 'auth/Walkthrough.html',
        controller: 'WalkthroughCtrl'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'auth/Login.html',
        controller: 'LoginCtrl'
      })
      .state('sign', {
        url: '/sign', 
        templateUrl: 'auth/SignUp.html',
        controller: 'SignUpCtrl'
      })

    .state('app', {
      url: '/app',
      abstract: false,
      templateUrl: 'app/menu.html',
      controller: 'AppCtrl'
  })

  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'app/Home.html',
        controller: 'HomeCtrl'
      }
    }
  })

    });

Home.html

<ion-view title="Home">
  <ion-pane class="animated fadeIn" style="background-color: #4da6b1">
    <ion-nav-bar align-title="center">
    <ion-nav-title>
        <span style="color: white">Home</span>
    </ion-nav-title>
        <ion-nav-buttons side="left">
     <button menu-toggle="left" class="button button-icon icon ion-navicon-round" style="color: white; background-color:#028090;" ></button>
    </ion-nav-buttons>
  </ion-nav-bar>



    <ion-content class="has-header" style="margin-top: 10px;" data-tap-disabled="true">
   <!--    <div class=".col" style=" margin-left: 2px;border: 1px solid white; width: 50%; height: 50%; border-radius: 5px;">
      </div> -->

    </ion-content>


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

menu.html

<ion-side-menus enable-menu-with-back-views="false">

  <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-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 menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Please help.

Upvotes: 0

Views: 362

Answers (1)

Mohan Gopi
Mohan Gopi

Reputation: 7724

In html page button you dont have ng-click

This is the format for ionic side menus 

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

</ion-side-menus>

This should be inside your controller

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

For more information about ionic side menu please refer this.

Also in href="#/app/browse", href="#/app/search", href="#/app/playlists"

All this page is not defined in your .config so create those pages and add them in your .config and you dont need all the href.

For $state.go('home'); you should inject ui.router in your module and download angular-ui-router.min.js and add it to your project or look this so it will work.

Upvotes: 1

Related Questions