How do I add a new state to ui-router with Ionic tab

ionic-v1
1

I am building an app the tabbed view. Ionic already gives me tabs at the bottom but I also want two buttons at the top that changes the view. I cannot seem to get this to work. Specifically the one at the top right (see screenshot). Right now, when you click on it; it does nothing.

image
myMomentsPNG.PNG1010×791 233 KB

This is the tab interface they give me:

<ion-view id="page1">
  <ion-tabs class="tabs-stable tabs-icon-bottom" id="tabsController-tabs1">
    <ion-tab icon="ion-ios-photos" href="#/page1/index" id="tabsController-tab1">
      <ion-nav-view name="tab1"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
      <ion-nav-view name="tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
      <ion-nav-view name="tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab2">
      <ion-nav-view name="tab2"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view>

In my routes.js I have this state for my new button:

 .state('tabsController.myMoments', {
    url: '/myMoments',
    cache:false,
    views: {
      'tab4': {
        templateUrl: 'myMoments/myMoments.html',
        controller: 'MyMomentsController',
        controllerAs: 'vm'
      }
    }
  })

I have also, sort of ‘hacked’ the button. Its not actually a tabbed state, its just a button with a ng-click that sends you to the desired state. I put this code in my index.html:

    <ion-nav-buttons side="right">
    <div class="ion-person" ng-click="indexController.redirectMyMoments()"></div>
  </ion-nav-buttons>

I don’t understand where I am supposed to put ‘tab4’. My assumption is that it goes with these rest of my tabs but no matter where I put it, it seems to mess up my other tabs and I don’t want to make another ion-tab in there because I don’t want it to be at the bottom.

I have also noticed that if I change the view name to ‘tab3’ it actually works so it is changing the state correctly, however, it highlights the third tab when you click on the top right view which is also bad.

Thanks for any help.

EDIT:

To put in much simplier terms. I have 3 tabs on the bottom using the ion-nav-view. I would like another, separate ion-nav-view on the top right. How do I accomplish this?

2

Hi @MatTaNg

Try this, on ng-click call one function in its controller and in the function() just have this line,
$state.go('stateOfyourDesiredView'); Please try this and let us know

3

Thats actually exactly what I had. It is going to the new state but when you click on the view on the top right it highlights a view on the bottom. The new route is call ‘tab4’ but where do I put it?

4

Yeah, so I’m seeing this as well. I can quickly and easily add a (click) function to go to the new location with state, but using the tab directive only allows me to go to the new page and there does not appear to be any way to send state data. This is kind of a big deal now that Angular has this state option, as it makes things a lot easier to navigate without having to set up query string data, etc.