離子性側面菜單未出現

Question

因此，我嘗試使用ionic來構建一個簡單的移動應用程序。 我看過離子教程，並在Google上搜索了很多，但我不太明白。 通過將以下代碼添加到index.html頁面，我創建了一個導航欄顯示在每個頁面上：

   <body ng-app="starter">
   <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
  </body>

我使用以下代碼在頁面之一的導航欄的右側添加了一個導航圖標：

<ion-view title="Hanzi Options">
  <ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-navicon" >
    </button>
  </ion-nav-buttons>
  <ion-content>...etc

我希望能夠單擊navicon並看到一個側面菜單，其中包含一個位於模板文件夾中的基本HTML頁面，名為sidemenu.html。 這是該文件中代碼的開頭：

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Navigate</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/friends">
          Friends
        </ion-item>...etc

我將此代碼添加到.config部分的app.js文件中：

.state('app.sidemenu', {
  url: "/sidemenu",
  abstract: true,
  templateUrl: "templates/sidemenu.html",
  controller: 'NavCtrl'
})

和一個空的NavCtrl到我的controllers.js文件：

.controller('NavCtrl', function($scope) {
});

我懷疑也許我的.state代碼不太正確，但不確定。 另外，我是否需要在NavCtrl控制器中添加一些內容以打開/關閉側邊菜單？ 提前謝謝了！

Answer 1

哇，我花了一天的時間來整理文檔，終於解決了這個問題。 離子框架網站上的教程和示例似乎已嚴重過時。

首先，我創建了一個工廠，以提供側面菜單的列表項：

 .factory('MenuService', function() {
  var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];

  return {
    all: function() {
      return menuItems;
    }
  }
})

然后，我創建了一個菜單控制器：

.controller('MenuController', function ($scope, $location, MenuService) {
  // "MenuService" is a service returning mock data (services.js)
  $scope.list = MenuService.all();
});

我用以下代碼替換了index.html頁面主體中的代碼：

    <div ng-controller="MenuController">
      <ion-side-menus>

          <!-- Center content -->
          <ion-pane ion-side-menu-content>
              <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>

              <ion-nav-view>
              </ion-nav-view>
          </ion-pane>

          <!-- Left Side Menu -->
          <ion-side-menu side="right">
              <ion-header-bar class="bar bar-header bar-assertive">
                  <h1 class="title">Menu</h1>
              </ion-header-bar>
              <ion-content has-header="true">
                  <ion-list>
                      <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
                          <!-- <i ng-class="item.iconClass"></i> -->
                          {{item.text}}
                      </ion-item>
                  </ion-list>
              </ion-content>
          </ion-side-menu>
      </ion-side-menus>
  </div>

工廠取代了我在template目錄中擁有的sidemenus.html。 而且，根本不需要“ .state”東西。

Answer 2

有一個適用於Ionic的入門應用程序，它是帶有側面菜單的應用程序的一個小示例

ionic start myApp sidemenu

這是一個實時預覽，您可以簽出

http://plnkr.co/edit/0RXSDB?p=preview

我認為您的路線定義有問題

更改此：

.state('app.sidemenu', { ...

變成這個：

.state('sidemenu', { ...

到菜單不同部分的所有其他路線應如下所示：

.state('sidemenu.home', { ...
.state('sidemenu.dashboard', { ...

離子性側面菜單未出現

問題描述

2 個解決方案

解決方案1
5 2014-07-17 02:58:03

解決方案2
0 2014-07-16 04:00:06

離子性側面菜單未出現

問題描述

2 個解決方案

解決方案1 5 2014-07-17 02:58:03

解決方案2 0 2014-07-16 04:00:06

解決方案1
5 2014-07-17 02:58:03

解決方案2
0 2014-07-16 04:00:06