Question

我希望有多个离子标签指向同一个视图，只需更改网址中的参数。

我无法做到这一点，页面加载，当我点击两个标签时，浏览器加载/ tab / dash / all ......

HTML：

<ion-tabs class="tabs-icon-top">

  <!-- Dashboard Tab -->
  <ion-tab title="All" icon="icon ion-grid" href="#/tab/dash/all">
    <ion-nav-view name="tab-articles-all"></ion-nav-view>
  </ion-tab>

  <ion-tab title="New" icon="icon ion-wand" href="#/tab/dash/new">
    <ion-nav-view name="tab-articles-new"></ion-nav-view>
  </ion-tab>

</ion-tabs>

JS：

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.dash', {
  url: '/dash/:filter',
  views: {
    'tab-articles-all': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    },
    'tab-articles-new': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }}
  })

HTML：

Answer 1

如果您知道过滤器参数的名称，那么为什么不为每个参数创建单独的状态呢？查看您的示例标记，您应该能够拥有类似的状态配置。

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.dash-all', {
  url: '/dash/all',
  views: {
    'tab-articles-all': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})
.state('tab.dash-new', {
  url: '/dash/new/',
  views: {
    'tab-articles-new': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
});

如果您在应用启动时无法了解所有可能的:filter参数。您可以通过使用$ stateNotFound事件捕获参数来动态添加状态，然后根据参数和go创建一个状态。

离子：如何在同一模板上有多个标签？

1 个答案: