ionic frameworkでサイドメニューを使うサンプルは、本家のサイトにあります。
普通に書くと、こんな感じです。
<side-menus> <pane side-menu-content> <p>メインコンテンツ</p> </pane> <side-menu side="left"> <p>左側のメニュー</p> </side> <side-menu side="right"> <p>右側のメニュー</p> </side> </side-menus>
これで動くんですが、nav-barとnav-viewを使った場合はどうするのかがちょっとわかりにくかったので、自分なりに直したのを載せておきます。まずはテンプレート側。
<body ng-app="SelfieGirl"> <nav-bar animation="nav-title-slide-ios7" type="bar-calm" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"> </nav-bar> <nav-view></nav-view> </body>
AngularJSのコントローラーとしてCardCtrlをidで指定します。
<side-menus id="CardsCtrl"> <!-- メインコンテンツ。drag-contentをfalseにすると画面のスライドで表示できなくなる。 --> <pane side-menu-content drag-content="false"> <view title="title" left-buttons="leftButtons" right-buttons="rightButtons"> <content has-header="true" padding="true"> <p>ここがメイン領域</p> </content> </view> </pane> <!-- 左サイドメニュー --> <side-menu side="left"> <header class="bar bar-header bar-assertive"> <div class="title">メニュー</div> </header> <content has-header="true"> <list> <a href="javascript:void(0)" class="item item-icon-lef" ng-click="logout()"> <i class="icon ion-log-out"></i> ログアウト </a> <a href="javascript:void(0)" class="item item-icon-lef" ng-click="foo()"> <i class="icon"></i> foo </a> <a href="javascript:void(0)" class="item item-icon-lef" ng-click="bar()"> <i class="icon"></i> bar </a> </list> </content> </side-menu> <!-- 右サイドメニュー --> <side-menu side="right"> <header class="bar bar-header bar-assertive"> <div class="title">メニュー</div> </header> <content has-header="true"> <list> <item class="item-icon-left"> hoge </item> <item class="item-icon-left"> piyo </item> <item class="item-icon-left"> fuga </item> </list> </content> </side-menu> </side-menus>
そして、このサイドバーを表示するための処理をJavaScriptで書きます。
$scope.sideMenuControllerが肝です。
angular.module('SelfieGirl.controllers', []) .controller('CardsCtrl', function($scope){ $scope.title = 'SelfieGirl'; $scope.leftButtons = [ { type: 'button-clear', content: '<i class="icon ion-navicon"></i>', tap: function(e) { // ヘッダーの左ボタンを押したら左メニュー表示 $scope.sideMenuController.toggleLeft(); } } ]; $scope.rightButtons = [ { type: 'button-clear', content: '<i class="icon ion-navicon"></i>', tap: function(e) { // ヘッダーの右ボタンを押したら右メニュー表示 $scope.sideMenuController.toggleRight(); } } ]; $scope.logout = function() { // ログアウト処理 }; $scope.foo = function(){}; $scope.bar = function(){}; });
コントローラーの処理がでかくなってしまうので、もっと細かくサイドバー単位で分割できるかもしれないですが、1画面として管理したいとしたら、上記のような感じになるのかなぁと思います。それにしてもサイドバーの実装がすごく楽ですね。ここはやはりhtml5というところでしょうか。ionic便利ですなぁ。