Question

我正在使用离子框架的sidemenu项目来构建一些东西。我创建了这个plunker来证明我的问题。

在plunker中，在连接页面上，当您单击home时，它将显示空白屏幕。我可以看到sidemenu的HTML元素都在那里，但是，它不会在屏幕上显示。

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

有谁知道最近发生了什么？

我的sidemenu模板看起来像这样：

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

  })

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

Answer 2

我自己解决了。问题在于州的观点的命名，这应该与摘要模板中的ion-nav-view名称。

更新的解决方案是here

离子侧菜单没有显示出来

2 个答案: