我有一个带有导航栏和左侧菜单的 Ionic 应用程序。导航栏包含一个“汉堡包”按钮，可扩展左侧菜单。侧面菜单包含链接到应用程序不同内容区域的按钮列表。从内容菜单中的项目导航时，应用程序的内容区域会正确更新，并且汉堡包图标仍保留在导航栏中。从内容区域中的按钮导航时，汉堡包图标会从导航栏中消失。
以下代码演示了 ( http://codepen.io/FrizziestFuture/pen/pJgvPN )。此处，页面 A 上的按钮链接到页面 B，但导致汉堡包图标消失。侧面菜单链接正常工作。
<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 to 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"
});
});
最佳答案
天啊。我花了很多时间才找到它，所以我必须在这里更明确地分享它。
所有功劳归于 Stefan van de Vooren 以及他在此处提供的链接。
Button Hidden On Child Views By default, the menu toggle button will only appear on a root level side-menu page. Navigating in to child views will hide the menu- toggle button. They can be made visible on child pages by setting the enable-menu-with-back-views attribute of the ionSideMenus directive to true.
<ion-side-menus enable-menu-with-back-views="true">
来源由 Stefan van de Vooren 提供:http://ionicframework.com/docs/api/directive/menuToggle/
关于angularjs - 路由时 ionic 导航栏按钮消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30115469/