How to load Ion-tabs dynamically?

Question

Actually I need a dynamically tabs, for example I'm in the

• /home and I need to show : filter, search icon tabs
• /filter and I need to show: apply and reload,home icon tabs
• /search and I need to show: home,filter icon tabs

Note: could be more or less in each state no more than 4 icons.

1. I tried somethings and not works
2. Maybe are there a better approach, some pattern.

Setup of my project:

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'
             }
           }
    })

   ....
}

What I tried

A. Include diferents tab templates according with the state in the menu.html

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

In the UserController

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

I get the icon tabs but when I click over each tab I can't see the view content.

B. ng-repeat over specific tabs from 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;
}

The menu.html provide the side menu and tabs

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

The problem: Always I get the icons but when I click over each icon I can't see the view content.

1. What am I doing wrong?
2. Can you help me with a good solution?

Answer 1

I think no need to take different tab templates for each state. Take tabController as a abstract state.

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

tabController.js Change value of tabs in scope dynamically based on state.

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