如何动态加载离子选项卡？

/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

对不起，我忘了更新文章我做到了，问题是一样的，我无法加载视图，屏幕是空白的。 –

如何动态加载离子选项卡？

回答

相关问题