在Ionic中顯示側邊菜單
[英]Show side menu in Ionic
問題描述
我嘗試了許多解決方案來顯示側面菜單按鈕，但似乎都無法正常工作。 讓我知道我在想什么。 我也想在左側帶有標簽的左側菜單漢堡圖標。
如果您需要我的幫助，請告訴我。
app.js
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
})
以下是我在tabs.html文件中的內容-
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="snd" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="snd.home" nav-clear class="item">Home</a>
<a ui-sref="snd.chat" nav-clear class="item">Chat</a>
<a ui-sref="snd.drink" nav-clear class="item">Drink</a>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
2 個解決方案
解決方案1
3 已采納 2016-01-26 11:19:54
創建一個特定的控制器（在下面的示例中為“ NavCtrl”），並使用ngController指令附加到<ion-side-menu> 。 在該控制器中，添加$ionicSideMenuDelegate.toggleLeft(); 方法。
這是一個工作片段：
angular.module('ionicApp', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tab', { url: '/tab', abstract: true, templateUrl: 'templates/tabs.html' }) .state('tab.activity', { url: '/tab-activity', views: { 'tab-activity': { templateUrl: 'templates/tab-activity.html', controller: 'tabActivityCtrl' } } }) .state('tab.profile', { url: '/tab-profile', views: { 'tab-profile': { templateUrl: 'templates/tab-profile.html', controller: 'tabProfileCtrl' } } }); $urlRouterProvider.otherwise("/tab/tab-activity"); }) .controller('NavCtrl', function($scope, $ionicSideMenuDelegate) { $scope.showMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; }) .controller('tabActivityCtrl', function($scope) {}) .controller('tabProfileCtrl', function($scope) {});
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Tabs Example</title> <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet"> <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script> </head> <body> <ion-side-menus> <ion-side-menu-content ng-controller="NavCtrl"> <ion-nav-bar class="bar-energized nav-title-slide-ios7"> <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()"> </button> </ion-nav-buttons> <ion-nav-view animation="slide-left-right"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar bar-header bar-assertive"> <h1 class="title">Second Section Left Menu</h1> </ion-header-bar> <ion-content has-header="true"> <ul class="list"> <li> <a class="item" menu-close nav-clear href="#/tab/home">Home</a> </li> <li> <a class="item" menu-close href="#/tab/chat">Chat</a> </li> <li> <a class="item" menu-close href="#/tab/drink">Drink</a> </li> </ul> </ion-content> <ion-footer-bar class="bar bar-footer"> <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a> </ion-footer-bar> </ion-side-menu> </ion-side-menus> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Activity Tab --> <ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity"> <ion-nav-view name="tab-activity"></ion-nav-view> </ion-tab> <!-- Profile Tab --> <ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile"> <ion-nav-view name="tab-profile"></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="templates/tab-activity.html" type="text/ng-template"> <ion-view title="tab-activity"> <ion-content> <h3>tab-activity</h3> <p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p> </ion-content> </ion-view> </script> <script id="templates/tab-profile.html" type="text/ng-template"> <ion-view title="tab-profile"> <ion-content> <h3>tab-profile</h3> <p>bla bla bla </p> </ion-content> </ion-view> </script> </body> </html>
解決方案2
0 2016-01-26 09:22:20
您是否添加了代表功能？ ：
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
在應用程序加載時顯示Ionic側面菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.