如何更改特定模板的侧边菜单内容

时间：2016-03-15 11:57:49

标签： html ionic-framework

我正在尝试创建一个在查看某个视图时具有不同右侧菜单的应用。有关于如何更换某些按钮以打开侧面菜单的在线示例，但没有如何替换菜单内容。 我有以下代码：

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？的选项

修改

我使用 $ rootScope ， $ ionicView.enter 和 $ ionicView.leave 的组合来跟踪视图的选择时间。然后我在菜单中使用了 ng-show 和 ng-hide 。

以下答案是问题的答案，但这对我不起作用，因为我在正确的菜单中有音乐播放器，我希望它们继续播放。

1 个答案:

答案 0 :(得分：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'
        },
        'menu-right@tab': {
          templateUrl: 'templates/tab-activity-menu.html'               
        }
      }
    })
    .state('tab.profile', {
      url: '/tab-profile',
      views: {
        'tab-profile': {
          templateUrl: 'templates/tab-profile.html',
          controller: 'tabProfileCtrl'
        },
        'menu-right@tab': {
          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>

相关问题
最新问题