Navigate from one tab to a nested view of another tab

ionic-v1
1

Is it possible to link from one tab to a nested view in another tab? I’ve tried two different methods and neither seem to work.

Here’s my router config:

.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');

});

In templates/tab-dash.html I have a link to a particular chat detail page:

<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>

From here I can navigate the chat detail page, however if I click the “Chats” tab button at the bottom nothing at all happens. I’d like it to bring me to the main Chats page.

Another method I tried was using ui-sref instead of 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>

In this case I receive an error Could not resolve ‘tab.chat-detail{chatId:1}’ from state ‘tab.dash’

What’s the best way to link to a “detail” view from within another tab? My main is to make sure that clicking the tab button at the bottom always brings me to the parent page for that tab. Right now, in the first example, it gets stuck on the “detail” view.

2

Try to add ng-click on your ion-tabs

   <ion-tab title="Programs" ui-sref="app.tabs.programList" class="ion-custom-tab-icon-program" ng-click="fn.goToState('app.tabs.programList')">
        <ion-nav-view name="tab-programs"></ion-nav-view>
   </ion-tab>

function TabsCtrl($scope, $state, $ionicHistory) {
        var fn = {};
        $scope.fn = fn;
        fn.goToState = goToState;

        function goToState(args) {
            $ionicHistory.clearHistory();
            $ionicHistory.nextViewOptions({
                disableAnimate: true,
                disableBack: true,
                historyRoot: true
            });
            $state.go(args, {}, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
    }
3

Thank you! I’ll give that a try. I’m curious though…it seems like what I am attempting to do would be a normal use case. Is there a better way to link from one tab to another, such as in the case of linking from a Dashboard screen to a screen showing a single Chat (on a different tab)?