How to navigate to a new screen from a tab screen

ionic-v1
1

Hi All,
I want to achieve something like this.
image
I want to navigate to a new screen (I dont want tabs in this screen) from a tab screen. So I did something like this in

app.js

.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.state('tab.ticket', {
    url: '/ticket',
    views: {
      'tab-ticket': {
        templateUrl: 'templates/tab-ticket.html',
        controller: 'TicketCtrl'
      }
    }
  })
.state('tab.intel', {
      url: '/intel',
      views: {
        'tab-intel': {
          templateUrl: 'templates/tab-intel.html',
          controller: 'IntelCtrl'
        }
      }
    })
.state('ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Chats Tab -->
  <ion-tab title="Tickets" icon="ion-ios-photos" href="#/tab/ticket">
    <ion-nav-view name="tab-tickets"></ion-nav-view>
  </ion-tab>

  <!-- Intel Tab -->
  <ion-tab title="Intel" icon="ion-person-stalker" href="#/tab/intel">
    <ion-nav-view name="tab-intel"></ion-nav-view>
  </ion-tab>
</ion-tabs>

tab-ticket.html

<ion-view view-title="Tickets">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="ticket in tickets" type="item-text-wrap" href="#/ticketDetail/{{ticket.id}}">
        <p>{{ticket.ticketId}}</p>
        <p>{{ticket.type}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

ticket-detail.html

<ion-view view-title="{{ticket.ticketId}}">
  <ion-content class="padding">
    <p>
      {{ticket.type}}
    </p>
  </ion-content>
</ion-view>

I can navigate to ‘ticketDetail’ from ‘tab.ticket’. But the issue is screen transition happens without an animation and no back button not appearing. Any ideas?

2

have you tried this ?
$ionicHistory.nextViewOptions({
disableBack: false
});

you can put the code above in TicketDetailController but before you do that, ensure you inject $ionicHistory as a dependency in the controller

3

In TicketCtrl I used below code to go to details screen.

$scope.goNext = function(selId){
          $ionicHistory.nextViewOptions({
            disableAnimate: false,
            disableBack: false
          });
          $state.go('ticketDetail', {ticketId: selId});
        };

But still animation not working and no back button. :frowning: Is it because it is a new navigation stack?

Animation and back button works fine when navigating inside the tab (example given in http://codepen.io/ionic/pen/odqCz).

4 
.state('ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

Replace above with

.state('tab.ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

Note the tab.

$state.go('ticketDetail', {ticketId: selId});
should be
$state.go('tab.ticketDetail', {ticketId: selId});

5

@ohiageorge
That would open a new screen inside tab screen. But I want the new screen to be opened without tabs.

6

I think this is related to

Anyone knows a solution?