Side Menu Not Working Here's My Code

ionic-v1
1

I have looked up tutorials and videos on how to get the sidemenu to work but mine isn’t working here’s the code segments

	.state('abs', {
    url: '/index',
    abstract: true,
	templateUrl: 'index.html',
	controller: 'newCtrl'
	})
	
	.state('menu', {
    url: '/menu',
	abstract: true,
	views: {
		'menuContent': {
				templateUrl: 'sideMenuLeft.html'
			}
		}
	})
	
	.state('abs.home', {
    url: '/homePage',	
    views: {
      'homePageContent': {
        templateUrl: 'homePage.html',
        controller: 'homePageCtrl'
      }
    }
  })

as you can see I have defined an abstract for my menu along with my other states. My sideMenuLeft.html looks like this

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

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->  
  
		<ion-nav-bar class="bar bar-calm myCustomBar" align-title="center">
	
		<ion-nav-buttons side="left">
			<button class="button button-clear" menu-toggle="left" ng-click="toggleLeft()"><i class="icon ion-android-menu"></i></button>
		</ion-nav-buttons>
		<!--<ion-nav-back-button class="button-clear">
			<i class="ion-arrow-left-c"></i> Back
		</ion-nav-back-button>-->
		<ion-nav-buttons side="right">
			<button class="button button-clear" ngclick="rightyClick()"><i class="icon ion-gear-a"></i></button>
		</ion-nav-buttons>
	</ion-nav-bar>

	<ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  

	<ion-side-menu side="left">
		<ion-header-bar class="bar-stable">
			<h1 class="title">Left</h1>
		</ion-header-bar>
		<ion-content>
			<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>

What am I doing incorrectly?

2

Hi,

I thought I would quickly respond as I know how frustrating these things can be. I think you need to have a read of the ui-router docs (https://github.com/angular-ui/ui-router/wiki) as you have got a little confused with named views.

Your issue is that you are trying to nest sideMenuLeft into menuContent which is a named view in itself i.e. sideMenuLeft. What I would do is transfer your sideMenuLeft.html code into index.html (the root view), remove your ‘menu’ state and then change your ‘abs.homepage’ state to be:

.state(‘abs.home’, {
url: ‘/homePage’,
views: {
‘menuContent’: {
templateUrl: ‘homePage.html’,
controller: ‘homePageCtrl’
}
}

As you have a state of abs.home this is going to be a child view therefore you need to reference a named view in the parent view.

HTH

3

Thanks Hawkeye, yes this is quiet frustrating, will try this now.

PS. Looking forward to seeing you in civil war :wink: