i have ionic application nav bar , left side menu. nav bar contains "hamburger" button expands left side menu. side menu contains list of buttons link different content areas of application. when navigating items in content menu, content area of application updated correctly, , hamburger icon remains in place in nav bar. when navigating button in content area, hamburger icon disppears nav bar.
the following code demonstrates (http://codepen.io/frizziestfuture/pen/pjgvpn). here, button on page links page b, causes hamburger icon disappear. side menu links work correctly.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script> </head> <body ng-app="myapp"> <ion-side-menus> <ion-pane ion-side-menu-content> <ion-nav-bar class="bar-balanced"> <ion-nav-buttons> <button menu-toggle="left" class="button button-icon ion-navicon"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <ion-content> <ion-list> <ion-item nav-clear menu-close ui-sref="pagea">page a</ion-item> <ion-item nav-clear menu-close ui-sref="pageb">page b</ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> </body> <script id="templates/pagea.html" type="text/ng-template"> <ion-view> <ion-content> <h1>page a</h1> <button ui-sref="pageb">go page b</button> </ion-content> </ion-view> </script> <script id="templates/pageb.html" type="text/ng-template"> <ion-view> <ion-content> <h1>page b</h1> </ion-content> </ion-view> </script> <script src="myapp.js"></script> </html> angular.module("myapp", ["ionic"]) .config(function ($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise("/pagea"); $stateprovider .state("pagea", { url: "/pagea", templateurl: "templates/pagea.html" }) .state("pageb", { url: "/pageb", templateurl: "templates/pageb.html" }); });
geez. spent time find it, have share more explicity here.
all credits goes stefan van de vooren, , link provided here.
button hidden on child views default, menu toggle button appear on root level side-menu page. navigating in child views hide menu- toggle button. can made visible on child pages setting enable-menu-with-back-views attribute of ionsidemenus directive true.
<ion-side-menus enable-menu-with-back-views="true">
source provided stefan van de vooren: http://ionicframework.com/docs/api/directive/menutoggle/
Comments
Post a Comment