爲<ion-tab>

Question

我的離子初學者，並停留在一個階段的動態網址，我想用標籤視圖顯示購物清單的不同部分和相應的網址是

產品頁面：「/名單/：listId /產品」 商店頁面： 「/列表/：listId /店」 價頁： 「/列表/：listId /店」

和相應的路線被列爲上述

$stateProvider 

    //all lists page as the starter point 
    .state('allLists', { 
    url: '/all-lists', 
    templateUrl: 'templates/all-lists.html', 
    controller: 'AllListsCtrl' 
    }) 

    //add list page 
    .state('addList', { 
    url: '/add-list', 
    templateUrl: 'templates/add-list.html', 
    controller: 'AddListCtrl' 
    }) 

    //tab view for list, abstract state setting up 
    .state('list', { 
    url: '/list/:listId', 
    abstract: true, 
    templateUrl: 'templates/list.html' 
    }) 

    //products page for list 
    .state('list.products', { 
    url: '/products', 
    views: { 
     'list-products': { 
     templateUrl: 'templates/list-products.html', 
     controller: 'ListProductsCtrl' 
     } 
    } 
    }) 

    //store page for list 
    .state('list.stores', { 
    url: '/stores', 
    views: { 
     'list-stores': { 
     templateUrl: 'templates/list-stores.html', 
     controller: 'ListStoresCtrl' 
     } 
    } 
    }) 

    //price page for list 
    .state('list.price', { 
    url: '/price', 
    views: { 
     'list-price': { 
     templateUrl: 'templates/list-price.html', 
     controller: 'ListPriceCtrl' 
     } 
    } 
    }) 

但是，在「templates/lis t.html」，我嘗試做以下事情

<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Products Tab --> 
    <ion-tab title="Products" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/list/{{listId}}/products"> 
    <ion-nav-view name="list-products"></ion-nav-view> 
    </ion-tab> 

    <!-- Stores Tab --> 
    <ion-tab title="Stores" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/list/{{listId}}/stores"> 
    <ion-nav-view name="list-stores"></ion-nav-view> 
    </ion-tab> 

    <!-- Price Tab --> 
    <ion-tab title="Price" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/list/{{listId}}/price"> 
    <ion-nav-view name="list-price"></ion-nav-view> 
    </ion-tab> 


</ion-tabs> 

但返回的鏈接是‘＃/列表//價格’和‘＃/列表//商店’ 所以，我的問題是，如何將listId分配給元素？

Answer 1

這一個可能有點棘手。

所有你需要改變你的抽象狀態，所以它不緩存或者你可能無法看到列表中的元素，在第一次訪問後，首先：

.state('list', { 
    url: '/list/:listId', 
    abstract: true, 
    cache: false, 
    templateUrl: 'list.html', 
    controller: 'mainListCtrl' 
}) 

，你可以請參閱我已使用cache: false。
我還添加了一個控制器，因爲我們需要路由listId：

.controller("mainListCtrl", function($scope, $stateParams){ 
    $scope.listId = $stateParams.listId; 
    $scope.$on('$ionicView.enter', function(e) { 
    console.log('mainListCtrl', $stateParams); 
    }); 
}) 

該控制器並沒有做太多;它只是獲取:listId參數並將其保存在$scope中，以便可以通過列表（查看）讀取它。

這是怎麼您templates/list.html應該是這樣的：

<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Products Tab --> 
    <ion-tab title="Products" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="list.products({ listId: listId })"> 
    <ion-nav-view name="list-products"></ion-nav-view> 
    </ion-tab> 

    <!-- Stores Tab --> 
    <ion-tab title="Stores" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" ui-sref="list.stores({ listId: listId })"> 
    <ion-nav-view name="list-stores"></ion-nav-view> 
    </ion-tab> 

    <!-- Price Tab --> 
    <ion-tab title="Price" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="list.price({ listId: listId })"> 
    <ion-nav-view name="list-price"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

通知我已經改變了href到ui-sref因爲它爲您提供了更好的靈活性在明知方面你引用哪條路線：

ui-sref="list.products({ listId: listId })" 
ui-sref="list.stores({ listId: listId })" 
ui-sref="list.price({ listId: listId })" 

這些參考文獻中的每一個都使用它們的名稱加載相應的狀態（和視圖），並將之前保存在中的參數listId 10控制器mainListCtrl（抽象狀態）：

.controller("mainListCtrl", function($scope, $stateParams){ 
    $scope.listId = $stateParams.listId; 
}) 

我已經創建了一個plunker在這裏你可以看到它是如何工作的。

PS：您可以嘗試將狀態列表的緩存更改爲cache: true，並查看行爲如何變化，只顯示您在「所有列表」視圖中選擇的第一個元素。