离子侧边菜单未显示答案

【问题标题】：ionic sidemenu not showing up离子侧边菜单未显示
【发布时间】：2014-09-22 09:20:13
【问题描述】：

我正在使用 ionic 框架的 sidemenu 项目在其之上构建一些东西。我创建了这个plunker 来演示我的问题。

在plunker中，在加入页面上，当你点击主页时，它会显示空白屏幕。我可以看到sidemenu的HTML元素都在那里，但是它没有出现在屏幕上。

如果我用标签更改我的侧边菜单，它可以正常工作。

有人知道怎么回事吗？

我的侧边菜单模板如下所示：

<ion-side-menus>
  <ion-pane side-menu-content>
    <ion-nav-bar class="bar-dark 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-dark">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="home">
          Search
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

我的状态如下所示：

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

    .state('app', {
      //url: "/app",
      abstract: true,
      templateUrl: "tpl.tabs.html",
      controller: 'AppCtrl'
    })

    .state('join', {
      url: "/join",
      views: {
        '': {
          templateUrl: "tpl.join.html",
          controller: 'joinCtrl'
        }
      }
    })
    .state('home', {
      parent: 'app',
      url: "/app",
      views: {
        'home': {
          templateUrl: "tpl.home.html",
          controller:'homeCtrl'
        }
      }
    })
    .state('menu', {
      parent: 'app',
      url: "/menu",
      views: {
        'menuContent': {
          templateUrl: "tpl.home.html",
        }
      }
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/join');

  })

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

您的代码中有几个误解here is how it works properly。
首先，我推荐你使用newest version of Ionic。然后确保你使用

<ion-side-menu-content></ion-side-menu-content>

以及带有点符号的ui-router的父/子视图功能，例如：

$stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "tpl.tabs.html",
    controller: 'appCtrl'
  })

  .state('app.join', {
    url: "/join",
    views: {
      'menuContent': {
        templateUrl: "tpl.join.html",
        controller: 'joinCtrl'
      }
    }
  });

【讨论】：

感谢 Clawish。这并不代表我想要做什么。我想加入作为开始屏幕（一种登录页面）。在单击事件时，它会消失并显示侧面菜单。您编辑的代码没有侧面菜单。其次，我可以使用做同样事情的点表示法，也许它更具可读性。查看此discussion 了解更多信息

【解决方案2】：

我自己解决了。问题在于各州意见的命名，这应该与 ion-nav-view 抽象模板中的名称。

更新后的解决方案是here

【讨论】：