在 Ionic 中显示侧边菜单答案

【问题标题】：Show side menu in Ionic在 Ionic 中显示侧边菜单
【发布时间】：2016-01-26 19:19:54
【问题描述】：

我尝试了许多解决方案来显示侧边菜单按钮，但似乎都不起作用。让我知道我错过了什么。我想在我的左侧有左侧菜单汉堡图标以及选项卡。

如果您需要我的其他任何东西，请告诉我。

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>

【问题讨论】：

ionicframework.com/docs/api/directive/ionSideMenus

标签： javascript html css angularjs ionic-framework

【解决方案1】：

创建一个特定的控制器（在下面的示例中是“NavCtrl”）并使用 ngController 指令附加到<ion-side-menu>。在该控制器中添加$ionicSideMenuDelegate.toggleLeft(); 方法。

这是一个有效的 sn-p：

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】：

您是否添加了委托功能？：

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

【讨论】：

No..我需要在哪里定义这个？
离子文档中提到过。检查这个：ionicframework.com/docs/api/directive/ionSideMenus
我在 <ion-side-menu-content ng-controller="NavController"> 和 <ion-side-menu side="left" ng-controller="NavController"> 上提到了这个，但仍然没有运气，标题也没有出现