Ion-nav-back-button not navigating back

ionic-v1
1

Hi

In my project i have 2 Tabs, inside those tabs i want to navigate back but the back method doesn’t work. The Back button is visible but on click nothing happends. I tried to do it manually but the $ionicHistory.goBack() Methods returns undefined. But $ionicHistory.viewHistory() contains views. I have no idea why this happends, my code is:

Index:

<body ng-app="JasserApp">

    <div class="login-main-container" ng-show="showLogin" ng-controller="LoginCtrl">
        <h5>JAPP</h5>
        <div class="login-main-button-container social-wrap b">
            <button class="facebook" ng-click="facebookSignIn()">Login with Facebook</button>
        </div>
    </div>
    <!--
      The nav bar that will be updated as we navigate between views.
    -->

    <div ng-show="!showLogin" ng-controller="MainCtrl">

        <!--
          The views will be rendered in the <ion-nav-view> directive below
          Templates are in the /templates folder (but you could also
          have templates inline in this html file if you'd like).
        -->
        <ion-nav-view name="tab"></ion-nav-view>
        

    </div>
</body>

Tabs.html (i think her is the problem but can not find)

<ion-side-menus>

<ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()"></button>
        </ion-nav-buttons>

    </ion-nav-bar>
    <!-- Main content, usually <ion-nav-view> -->
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
        <!-- Dashboard Tab -->
        <ion-tab title="Groups" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/groups">
            <ion-nav-view name="tab-groups"></ion-nav-view>
        </ion-tab>
        <!-- Chats Tab -->
        <ion-tab title="Account" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
            <ion-nav-view name="tab-chats"></ion-nav-view>
        </ion-tab>
        <!-- Account Tab -->
        <!--<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
      <ion-nav-view name="tab-account"></ion-nav-view>
    </ion-tab>-->

    </ion-tabs>
</ion-side-menu-content>

<ion-side-menu side="right">
    <ion-nav-view name="sideMenu"></ion-nav-view>
</ion-side-menu>

</ion-side-menus>

Routing

. 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,
    views: {
        'tab': {
            templateUrl: 'templates/tabs.html',
            controller: 'TabCtrl'
        }
    }
  })

  // Each tab has its own nav history stack:

  .state('tab.groups', {
    url: '/groups',
    views: {
      'tab-groups': {
        templateUrl: 'templates/tab-groups.html',
        controller: 'GroupsCtrl'
      },
      'sideMenu':
          {
              templateUrl: 'templates/groups-sideMenu.html',
          }
    }
  }).state('tab.group-createGroup', {
      url: '/createGroup',
      views: {
          'tab-groups': {
              templateUrl: 'templates/group-createGroup.html',
              controller: 'CreateGroupCtrl'
          },
          'sideMenu':
              {
                  templateUrl: 'templates/groups-sideMenu.html',
              }
      }
  }).state('tab.group-createGroup-addBank', {
      url: '/createGroup/:groupId',
      views: {
          'tab-groups': {
              templateUrl: 'templates/group-createGroup-addBank.html',
              controller: 'AddBankCtrl'
          },
          'sideMenu':
              {
                  templateUrl: 'templates/groups-sideMenu.html',
              }
      }
  }).state('tab.group-createGroup-addUsers', {
      url: '/AddUsers',
      views: {
          'tab-groups': {
              templateUrl: 'templates/group-createGroup-addUsers.html',
              controller: 'AddUsersCtrl'
          },
          'sideMenu':
              {
                  templateUrl: 'templates/groups-sideMenu.html',
              }
      }
  })
   .state('tab.group-detail', {
       url: '/group/:groupId/:groupName',
       views: {
          'tab-groups': {
           templateUrl: 'templates/group-detail.html',
           controller: 'GroupsDetailCtrl'
          },
          'sideMenu':
         {
             templateUrl: 'templates/groupDetail-sideMenu.html',
         }
       }
    })

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

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

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

});

To explain i return two views one for the side-menu and one for the tab, maybe this is making some troubles, but i need it because on different urls i need different things in the side-menu.

I hope someone can help me.
Thanks :slight_smile: