離子sidemenu沒有出現

Question

我使用離子框架的sidemenu項目來建立它的頂部。 我已經創建了plunker來演示我的問題。

在加載頁面上，當您單擊home時，它顯示空白屏幕。我可以看到，sidemenu的HTML元素都在那裏，但是，它不會在屏幕上顯示。

如果我改變我的sidemenu標籤，它工作正常。

有誰知道最近怎麼回事？

我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

我解決它自己。 問題在於命名州的視圖，這應該與抽象模板中的 ion-nav-view名稱匹配。

更新的解決方案是here

Answer 2

你在你的代碼​​有幾個誤解。
首先，我建議你使用newest version of Ionic。 然後確保你使用

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

和UI路由器與點號的父/子視圖功能，例如：

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