如何在 Ionic 中设置带有选项卡的侧边菜单？

Question

在我看来，有一个侧面菜单，用于设置和关于页面之类的东西，结合主应用程序的选项卡是一个非常重要和标准的应用程序界面。 Google 的 Messenger 应用程序之类的东西使用它。

我正在努力让它工作，我看到有很多关于它的问题，但几乎没有令人满意的信息。我已经将侧边菜单与滑动框结合在一起了。这应该很容易。我曾经为我的应用程序使用 jQuery Mobile，它比 Ionic 笨重得多，但做这样的界面很容易，而且效果很好。

我遇到的问题是选项卡模板没有加载到选项卡中。这可能是我遗漏的一些愚蠢的东西，但这是我的 app.js 代码片段：

config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })

.state('tab.tab1', {
      url: 'tab/tab1',
      views: {
        'tab-tab1': {
          templateUrl: 'templates/tab-tab1.html',
          controller: 'tab1Ctrl'
        }
      }
    })

.state('tab.tab-tab2', {
      url: 'tab/tab2',
      views: {
        'tab-tab2': {
          templateUrl: 'templates/tab-tab2.html',
          controller: 'tab2Ctrl'
        }
      }
    })

.state('tab.extras', {
    url: 'tab/extras',
    views: {
      'tab-extras': {
        templateUrl: 'templates/tab-extras.html',
        controller: 'AccountCtrl'
      }
    }
  })

    .state('app.about', {
      url: "/about",
      views: {
        'menuContent': {
          templateUrl: "templates/about.html",
          controller: 'aboutCtrl'
        }
      }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

侧边菜单工作正常，我可以用它导航到关于页面或返回选项卡。这些选项卡的作用在于它们会改变焦点并且图标会改变颜色，但模板不会加载到它们中。我已经对 url 名称进行了三重检查。

有人知道怎么做吗？如果我在某个地方犯了一个小错误并使其正常工作，我将把它作为一个例子来说明如何创建这个非常需要的界面。

编辑：根据要求。

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

我觉得他们都很相配，不是吗？

注意 - 关于这是重复的查询；我的应用程序是一个选项卡式应用程序，在基页上有一个侧边菜单。另一个问题是关于具有一系列部分的应用程序，其中一个部分有选项卡。这是完全不同的结构。

Answer 1

我认为您的路由有点偏离 - 您的选项卡的子状态未完全声明。你已经这样声明了它们

.state('tab.tab1', {

...而且您从未声明父 tab 状态。所以它们被保留 'hanging' 直到父状态被声明。 ui-路由器将忽略它们，直到发生这种情况。

试试这个

config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })

.state('app.tabs.tab1', {
      url: '/tab1',
      views: {
        'tab-tab1': {
          templateUrl: 'templates/tab-tab1.html',
          controller: 'tab1Ctrl'
        }
      }
    })

.state('app.tabs.tab2', {
      url: '/tab2',
      views: {
        'tab-tab2': {
          templateUrl: 'templates/tab-tab2.html',
          controller: 'tab2Ctrl'
        }
      }
    })

.state('app.tabs.extras', {
    url: '/extras',
    views: {
      'tab-extras': {
        templateUrl: 'templates/tab-extras.html',
        controller: 'AccountCtrl'
      }
    }
  })

    .state('app.about', {
      url: "/about",
      views: {
        'menuContent': {
          templateUrl: "templates/about.html",
          controller: 'aboutCtrl'
        }
      }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

在选项卡模板中使用 ui-sref 而不是 href 更好/更清楚 - 更容易看到某些东西映射到什么状态

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

没有测试过，但我认为应该可以解决！顺便说一句，控制台有什么错误吗？

如何在 Ionic 中设置带有选项卡的侧边菜单？

How to set up sidemenu with tabs in Ionic?

angularjs

ionic-framework