How to navigate to a new screen from a tab screen

@nirman99 wrote:

Hi All,
I want to achieve something like this.

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?

Posts: 1

Participants: 1

Read full topic