2016-03-15 89 views
1

我正在嘗試創建具有不同右側菜單的應用程序,以查看某個視圖。網上有很多關於如何更換某些按鈕以打開側邊菜單的示例,但沒有如何替換菜單的內容。 我有下面的代碼:如何更改特定模板的側邊菜單內容

menu.html(抽象的觀點,即所有其他視圖繼承)

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
     <!-- Left side menu button --> 
     <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     </ion-nav-buttons> 
     <!-- Right side menu button, updates internetstatus on click to determine whether or not to show music players--> 
     <ion-nav-buttons side="right"> 
     <button class="button button-icon button-clear ion-music-note" menu-toggle="right" ng-click="checkConn()"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <!-- Left side menu --> 
    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item menu-close href="#/app/stages"> 
      Stages 
     </ion-item> 
     <ion-item menu-close href="#/app/info"> 
      Info 
     </ion-item> 
     <ion-item menu-close href="#/app/newsfeed"> 
      News feed 
     </ion-item> 
     <ion-item menu-close href="#/app/floorplan"> 
      Floorplan 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 

    <!-- Right side menu --> 
    <ion-side-menu side="right"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Right</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player"> 
      <iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&amp;embed_uuid=bbb2b97a-f82c-4732-a951-94fcf0a7dd72&amp;feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0715-spieje-summer-mixtape%2F&amp;hide_cover=1&amp;hide_tracklist=1&amp;light=1&amp;mini=1&hide_artwork=1&amp;replace=0" frameborder="0"></iframe> 
     </ion-item> 
     <ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player"> 
      <iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&amp;embed_uuid=8b9f98e7-dee8-4492-94b1-df72753057d9&amp;feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0515-spieje-mixtape-mei-2015%2F&amp;hide_cover=1&amp;hide_tracklist=1&amp;light=1&amp;mini=1&hide_artwork=1&amp;replace=0" frameborder="0"></iframe> 
     </ion-item> 
     <ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player"> 
      <audio style="width:100%" controls><source src="http://www.spieje.nl/downloads/mixtape/Spieje2015MixtapeApr.mp3" type="audio/mpeg"></audio> 
     </ion-item> 
     <ion-item menu-close ng-hide="internetconn"> 
      Geen internet! 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

其他查看HTML(其中的菜單必須是不同的)

<ion-view view-title="Floorplan"> 
    <!-- Override right button, change icon--> 
    <ion-nav-buttons side="right"> 
     <button class="button button-icon button-clear ion-map" menu-toggle="right"> 
     </button> 
    </ion-nav-buttons> 
    <!-- Override right menu content --> 
    <!-- Right side menu --> 
    <ion-side-menu side="right"> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Right</h1> 
     </ion-header-bar> 
     <ion-content> 
      <ion-list> 
       <ion-item> 
        <button class="button button-icon button-clear ion-map"></button> 
       </ion-item> 
       <ion-item> 
        <button class="button button-icon button-clear ion-paper-airplane"></button> 
       </ion-item> 
       <ion-item> 
        <button class="button button-icon button-clear ion-transgender"></button> 
       </ion-item> 
       <ion-item> 
        <button class="button button-icon button-clear ion-pizza"></button> 
       </ion-item> 
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
    <!-- Page content --> 
    <ion-content> 
     Image here 
    </ion-content> 
</ion-view> 

按鈕圖標發生變化併發揮作用,但結果是右側的菜單內容保持不變,並且內容視圖中出現了一個奇怪的列表,其中包含我想要的內容出現在菜單中。

有沒有辦法做到這一點在這樣的HTML,如果是這樣,如何。或者是我唯一的選擇使用布爾值並使用ng-show和ng-hide?

EDIT

我用$ rootScope$ ionicView.enter$ ionicView.leave的組合來跟蹤被選擇的視圖時的感覺。然後我在菜單中使用了ng-showng-hide

下面的答案是問題的答案,但這對我並不奏效,因爲我在右側菜單中有音樂播放器,我希望他們繼續玩。

回答

2

您需要爲每個菜單使用模板。下面的例子可以幫助你:

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' 
 
     }, 
 
     '[email protected]': { 
 
      templateUrl: 'templates/tab-activity-menu.html'    
 
     } 
 
     } 
 
    }) 
 
    .state('tab.profile', { 
 
     url: '/tab-profile', 
 
     views: { 
 
     'tab-profile': { 
 
      templateUrl: 'templates/tab-profile.html', 
 
      controller: 'tabProfileCtrl' 
 
     }, 
 
     '[email protected]': { 
 
      templateUrl: 'templates/tab-profile-menu.html'    
 
     } 
 
     } 
 
    }); 
 

 
    $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-nav-view></ion-nav-view> 
 

 
    <script id="templates/tabs.html" type="text/ng-template"> 
 
    <ion-side-menus> 
 

 
     <ion-side-menu-content ng-controller="NavCtrl"> 
 
     <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
 
      <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
 
      </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-buttons side="right"> 
 
      <button class="button button-icon button-clear ion-music-note" ng-click="" menu-toggle="right"> 
 
      </button> 
 
      </ion-nav-buttons> 
 

 
      <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> 
 
     </ion-side-menu-content> 
 

 
     <!-- Left side menu (fixed) --> 
 
     <ion-side-menu side="left"> 
 
     <ion-header-bar class="bar bar-header bar-assertive"> 
 
      <h1 class="title">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> 
 

 
     <!-- Right side menu (in templates different for each view) --> 
 
     <ion-side-menu side="right"> 
 
     <div ui-view='menu-right' /> 
 
     </ion-side-menu> 
 

 
    </ion-side-menus> 
 

 

 
    </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"> 
 
     <!-- Override right button, change icon--> 
 
     <ion-nav-buttons side="right"> 
 
     <button class="button button-icon button-clear ion-map" menu-toggle="right"> 
 
      </button> 
 
     </ion-nav-buttons> 
 
     <!-- Page content --> 
 
     <ion-content> 
 
     <h3>tab-profile</h3> 
 
     <p>bla bla bla </p> 
 
     </ion-content> 
 
    </ion-view> 
 
    </script> 
 

 

 
    <script id="templates/tab-activity-menu.html" type="text/ng-template"> 
 
    <ion-header-bar class="bar-stable"> 
 
     <h1 class="title">Activity Menu</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
     <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> 
 
    </script> 
 

 
    <script id="templates/tab-profile-menu.html" type="text/ng-template"> 
 
    <ion-header-bar class="bar-assertive"> 
 
     <h1 class="title">Profile Menu</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
     <ul class="list"> 
 
     <li> 
 
      <a class="item" menu-close nav-clear href="#/tab/home">Test</a> 
 
     </li> 
 
     <li> 
 
      <a class="item" menu-close href="#/tab/chat">Check</a> 
 
     </li> 
 
     </ul> 
 
    </ion-content> 
 
    </script> 
 

 
</body> 
 

 
</html>

相關問題