Ionic UI路由器不適用於子視圖

我正在嘗試創建一個非常簡單的lookbook應用程序。然而，我似乎無法獲得工作路線。我試着回答this question來調試路由。控制檯中沒有任何東西出現Ionic UI路由器不適用於子視圖

我試圖創建一個應用程序，用戶在頁面上看到幾個外觀，然後可以導航到相應的詳細信息頁面。如果Ionic也認識到詳細信息頁面是Lookbook頁面的子頁面，那將會很好。從而顯示菜單欄中的後退按鈕。

的app.config路線設置代碼：

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('lookbook.brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

$urlRouterProvider.otherwise('/lookbook');

的index.html<body>內容：

<ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 

    <ion-nav-title> 
     <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg"> 
    </ion-nav-title> 
    </ion-nav-bar> 

    <ion-nav-view name="main"> 
    </ion-nav-view>

該頁面的lookbook顯示出來。但是，當我導航到/lookbook/brand-shirt時，它將恢復爲/lookbook。我錯過了什麼？

來源

2017-01-22 Feanaro

在該路由中，brand-shirt狀態是lookbook狀態（lookbook.brand-shirt）的子項，因爲您不需要加載詳細信息INSIDE視圖，因此不需要將其設置爲這樣。

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

    $urlRouterProvider.otherwise('/lookbook');

這樣做。而且歷史記錄的工作原理是相同的，因爲您正在推送'main'ion-nav-view中的視圖。因此，在您的應用程序開始時，/lookbook在main中加載，當您轉到brand-shirt時，新視圖在main視圖堆棧中位於上方。如果你回去，你將刪除細節視圖並返回到lookbook。

CodePen

來源

2017-01-23 00:05:15 Hiraqui

你的解決方案的工作，但沒有孩子的狀態，我不能再使用通過UI路由器解決父母的解析參數 –

您可以將對象發送到子狀態作爲一個參數或使用服務來處理保存和獲取的對象。 – Hiraqui

Ionic UI路由器不適用於子視圖

回答

相關問題