Angularjs 离子侧菜单未显示

我正在使用ionic framework的侧菜单项目在上面构建一些东西。 我创建这个来证明我的问题

在plunker中，在join页面上，当您单击home时，将显示空白屏幕。我可以看到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');

  })

---

您的代码中有几个错误概念。
首先，我建议您使用。 然后确保您使用

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

我自己解决了。 问题在于州视图的命名，它应该与

ion导航视图

抽象模板中的名称

---

更新后的解决方案是

谢谢。这并不代表我想做什么。我想加入作为开始屏幕（一种登录页面）。单击事件，它将消失并显示侧菜单。您编辑的代码没有侧菜单。第二，我可以用点符号做同样的事情，也许它更可读。查看此项了解更多信息

$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'
      }
    }
  });