如何动态加载离子标签？

Question

其实我需要一个动态的tabs，比如我在

• /home 我需要显示：filter, search 图标标签
• /filter 我需要显示：apply 和 reload,home 图标标签
• /search 我需要显示：home,filter 图标选项卡

注意：每个状态可以多或少不超过 4 个图标。

1. 我尝试了一些方法，但不起作用
2. 也许有更好的方法，一些模式。

我的项目设置：

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.在menu.html 中包含符合state 的不同选项卡模板

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

在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>

问题：我总是得到图标，但是当我点击每个图标时，我看不到视图内容。

1. 我做错了什么？
2. 您能帮我找到一个好的解决方案吗？

Answer 1

我认为没有必要为每个州采用不同的标签模板。 以 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"}];

tabs.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>