Question

在我看来有侧面菜单，对于设置和页面等内容，结合主应用程序的选项卡是一个非常重要和标准的应用程序界面。谷歌的Messenger应用程序就是这样的。

我正在努力让它发挥作用，我发现有很多问题，而且信息很少。我把侧面菜单与swipeboxes结合在了一起。这应该很简单。我曾经使用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');
});

侧边菜单工作正常，我可以用它导航到about页面或返回选项卡。选项卡的作用是它们更改焦点并且图标会更改颜色，但模板不会加载到它们中。我已经三次检查了网址名称。

有谁知道怎么做？如果我在某个地方犯了一个小错误并让它正常工作，我会将Codepen作为如何创建这个非常需要的界面的一个例子。

编辑：根据要求。

<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州。所以他们被“悬挂”直到宣布父州。在这种情况发生之前，ui-router会忽略它们。

试试这个

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>

没有测试过，但我认为应该修复它！控制台中的任何错误BTW？

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

1 个答案: