从一个选项卡导航到另一个选项卡的嵌套视图

时间:2016-09-07 16:52:12

标签: angularjs ionic-framework angular-ui-router

是否可以从一个标签链接到另一个标签中的嵌套视图?我尝试了两种不同的方法,似乎都没有用。

这是我的路由器配置:

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.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',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

在templates / tab-dash.html中,我有一个指向特定聊天详细信息页面的链接:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h1>My Chats</h1>
    <a href="#/tab/chats/1">Chat #1</a>
  </ion-content>
</ion-view>

从这里我可以浏览聊天详情页面,但是如果我点击&#34;聊天&#34;底部的标签按钮什么都没发生。我想把它带到主要的聊天页面。

我尝试的另一种方法是使用ui-sref而不是href:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h1>My Chats</h1>
    <a ui-sref="tab.chat-detail{chatId:1}">Chat #1</a>
  </ion-content>
</ion-view>

在这种情况下,我收到错误无法解析&tab;聊天明细{chatId:1}&#39;来自州&lt; tab.dash&#39;

链接到&#34;详细信息&#34;的最佳方法是什么?从另一个标签中查看?我的主要是确保单击底部的选项卡按钮始终将我带到该选项卡的父页面。现在,在第一个例子中,它被困在&#34;细节&#34;图。

1 个答案:

答案 0 :(得分:0)

我有一个解决方法。导航到另一个选项卡的嵌套视图时,我隐藏了选项卡栏。 当用户导航回根选项卡时再次显示它。

要知道如何以编程方式隐藏和显示标签栏,请检查以下链接: -

https://stackoverflow.com/a/45002644/4527624