如何動態加載離子選項卡？

/home，我需要證明：filter，search圖標標籤
/filter，我需要證明：apply和reload，home圖標標籤
/search，我需要證明：home，filter圖標標籤

注意：在每個狀態下或多或少不超過4個圖標。

我想出頭，而不是工作
也許是有沒有更好的辦法，一些模式。我的項目

設置：

angular.module('app.user', 
    ['ionic','leaflet-directive']) 
.config(config); 

function config ($stateProvider,$logProvider) { 
    // menu.html provide side menu and tabs 
    $stateProvider 
    .state('user', { 
      url: "/user", 
      cache: false, 
      abstract: true, 
      templateUrl: "templates/user/menu.html", 
      controller: 'UserController' 
    }) 
    .state('user.home', { 
      url: "/home", 
      cache: false, 
      views: { 
      'tab-home': { 
       templateUrl: "templates/user/home.html", 
       controller: 'HomeController' 
      } 
      } 
    }) 

    .state('user.filter', { 
      url: "/filter", 
      cache: false, 
      views: { 
      'tab-filter': { 
       templateUrl: "templates/user/filter.html", 
       controller: 'FilterController' 
      } 
      } 
    }) 

    .... 
}

我試過

A.與根據包括diferents標籤模板在menu.html

<div ng-include="getIncludeTabs()"></div>

的state在UserController

function getIncludeTabs(){ 
    if ($state.current.name === 'user.filter') { 
     return "templates/menu/tabs-filter.html"; 
    } else { 
     return "templates/menu/tabs-home.html"; 
    } 
}

我得到圖標選項卡，但是當我點擊每個選項卡時，我看不到視圖內容。

B. ng-repeat從UserController的特定標籤。

function getTabs() { 
     var tabs = []; 
     if ($state.current.name === 'user.filter') { 
      tabs.push({ title:"Home", name: "tab-home", href:"#/user/home"}); 
      tabs.push({ title:"Apply", name: "", href:""}); 
      tabs.push({ title:"Reload", name: "", href:""}); 
     } else { 
      tabs.push({ title:"Home", name: "tab-home", href:"#/user/home"}); 
      tabs.push({ title:"Filter", name: "tab-filter", href:"#/user/filter"}); 
      tabs.push({ title:"Search", name: "tab-search", href:"#/user/search"}); 
     } 

     ... 

     return tabs; 
}

的menu.html提供側面菜單和選項卡

<ion-tabs> 
    <ion-tab ng-repeat="tab in tabs" title="{{tab.title}}" ng-href="{{tab.href}}"> 
    <ion-nav-view name="{{tab.name}}"></ion-nav-view> 
    </ion-tab> 
</ion-tabs>

問題：總是我得到的圖標，但是當我點擊了每個圖標我不能看的見的內容。

我在做什麼錯？
你能幫助我一個很好的解決方案嗎？

來源

2016-07-22 Cristian Chaparro A.

我認爲不需要爲每個州採取不同的標籤模板。將tabController作爲抽象狀態。

.state('tab', { 
     url: '/tab', 
     abstract: true, 
     templateUrl: 'templates/tabs.html', 
     controller: 'tabController' 
    })

tabController.js範圍凸片變化值動態地基於狀態。

$scope.tabs = [ {title :"Filter", name : "tab-filter"},{title :"Search", name : "tab-search"}];

選項卡。html

<ion-tabs> 
    <ion-tab title="{{tab.title}" href="#" ng-repeat="tab in tabs"> 
    <ion-nav-view name="{{tab.name}}"></ion-nav-view> 
    </ion-tab> 
</ion-tabs>

來源

2016-07-23 05:25:33

對不起，我忘了更新文章我做到了，問題是一樣的，我無法加載視圖，屏幕是空白的。 –

如何動態加載離子選項卡？

回答

相關問題