イオンタブを動的にロードするには？実は

Question

私は例えば、私が

• /homeにいるよ、動的にタブを必要と私は示す必要がある：filter、searchアイコンタブ
• /filterと私は表示する必要があり：applyとreload、homeアイコンをhome、filterアイコンタブ

01：タブ

/searchと私は示す必要があります

注：それぞれの状態で多かれ少なかれ、4つ以上のアイコンである可能性があります。

1. 私は代を試してみましたが、たぶん
2. の作品ではない、より良いアプローチは、いくつかのパターンがあります。私のプロジェクトの

セットアップ：私は

A.がUserController

でmenu.html

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

にstateに応じdiferentsタブテンプレートをインクルードしようとした何

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

    .... 
} 

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

アイコンタブが表示されますが、各タブをクリックすると表示内容が表示されません。

B. ng-repeatUserControllerからの特定のタブです。は常に私はアイコンを取得しますが、私は各アイコンの上にクリックしたときに、私はビューのコンテンツを見ることができない。menu.html

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

は、サイドメニューとタブ

<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"}]; 

タブです。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>