<ion-side-menus> not working inside <ion-view> on iPhone

ionic-v1
1

I have an application that at the root does not require any ion-side-menus. However, there is one view that does require an ion-side-menu.

For instance, take a restaurant. You may list a bunch of options on the home view (menu, contact, map), but when you click menu you move to a view that list options for breakfast, lunch and dinner. Instead of taking the user to a new view, you’d like to slide out a menu when the user clicks breakfast with all your options.

I was able to implement this quite well, using Android as my development target. However when switching to iPhone, the view completely stops rendering at all!

Below is the ion-view I’m using:

<ion-view view-title="Menu">
    <ion-content>
	    <ion-side-menus enable-menu-with-back-views="false">
		<ion-side-menu-content>
			<ion-list>
				<ion-item ng-repeat="meal in vm.meals" ng-click="vm.onMealClick(meal.name)">
					{{meal.name}}
				</ion-item>
			</ion-list>
		</ion-side-menu-content>
		<ion-side-menu side="right">
			<div class="item item-button-left">
				{{vm.selectedMeal}}
				<button class="button button-clear button-small" menu-close>
					<i class="icon ion-close"></i>
				</button>
			</div>
			<ion-list>
				<ion-item>Eggs</ion-item>
				<ion-item>Cereal</ion-item>
			</ion-list>
		</ion-side-menu>
	</ion-side-menus>	
</ion-content>

And this is the menu toggle binding:

var vm = this;
vm.onMealClick = onMealClick;

	function onMealClick(meal) {
		vm.selectedMeal = meal;
		$ionicSideMenuDelegate.toggleRight();
	};

Does anyone know of issues using ion-side-menus inside of an ion-view? In my real application, this provides an extremely organized user-experience, so it’s something I’d like to keep pursuing and not change the layout to accommodate.

Thanks for any and all help.

  • Eric