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&embed_uuid=bbb2b97a-f82c-4732-a951-94fcf0a7dd72&feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0715-spieje-summer-mixtape%2F&hide_cover=1&hide_tracklist=1&light=1&mini=1&hide_artwork=1&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&embed_uuid=8b9f98e7-dee8-4492-94b1-df72753057d9&feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0515-spieje-mixtape-mei-2015%2F&hide_cover=1&hide_tracklist=1&light=1&mini=1&hide_artwork=1&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-show和ng-hide。
下面的答案是問題的答案,但這對我並不奏效,因爲我在右側菜單中有音樂播放器,我希望他們繼續玩。