我有一个带有导航栏和左侧菜单的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"
});
});
2 回答
吉兹 . 我花了很多时间来找到它,我必须在这里更明确地分享它 .
所有学分都归Stefan van de Vooren所有,以及他在此提供的链接 .
来源:Stefan van de Vooren:http://ionicframework.com/docs/api/directive/menuToggle/
对于Ionic 2和3,代码看起来像这样
如果没有添加,ion-menu属性“persistent”默认为false .