Side Menu With Nested View

Demo has a side menu, and the side menu’s content pane has a nested nav-view:

The demo was created to help answer this question:

Thanks, Adam. This should help me understand some issues about angular-ui-router. Can you point me to a more in depth tutorial related to angular-ui-router ?

This is the best source.

The demo doesn’t work for me.


The demo is not working.

Also, there is a problem with slide menus, does not close automatically.


Taking a look at this now, looks like several codepens broke in the last release.

The codepens should be fixed now. It appears had temporary issues.

Have you tested it on iPhone ? It works nice on Android , but the toggle button does not work on iPhone’s Safari nor Chrome , maybe the touch function works different there ?

Nice~ It’s help me a lot. Thanks.

@adam Did you delete the codepen ? The site claims it cant find it. I am having a few issues with nested states/views and wanted to see an example. Thanks for all the hard work on ionic. Loving it so far.

If you are referring to this link: then no, we didn’t delete it. Codepen must have been down when you tried opening it.

Have you tried the link recently ? Every time I try it, codepen claims there is nothing there. Yet, I can go to other codepens just fine. Strange.

@keithdmoore the link hasn’t worked for me either, fyi.

@adam code pen says it can’t find it.

i think codepen link is broken , but i guess you are looking for this

that’s it, exactly, thanks.

I downloaded this code to use as a base to setup menus like the ones you have. It works fine, until I change the js file to be the one that ionic installs for me when I create an app or to the more recent beta ones on the web. In either of those cases it fails on $scope.sideMenuController.toggleLeft(); saying sideMenuController is undefined.

Someone needs to figure out why 0.9.26 or 0.9.27 works but does not.

try the code from the docs

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

already tried that, tried it again. OK all fixed, took out the $scope which was in front of $ionicSideMenuDelegate.toggleLeft(); and now it works.

TypeError: Cannot read property ‘toggleLeft’ of undefined
at Scope.$scope.toggleCategories (http://localhost:8100/js/controllers.js:32:31)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:18471:21
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:43026:9
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20326:28)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20424:23)
at HTMLButtonElement. (http://localhost:8100/lib/ionic/js/ionic.bundle.js:43025:13)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10478:10
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10477:5)
at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2648:7)