Question

实际上我需要一个动态标签，例如我在

中

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

   ....
}

我尝试了什么

一个。根据{{1}}

state

menu.html

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

UserController

我获得了图标标签，但当我点击每个标签时，我看不到视图内容。

B中。来自function getIncludeTabs (){ if ($state.current.name === 'user.filter') { return "templates/menu/tabs-filter.html"; } else { return "templates/menu/tabs-home.html"; } }的特定标签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

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

我做错了什么？
你能帮我一个好的解决方案吗？

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>

如何动态加载Ion-tabs？

1 个答案: