Tab + Normal View -> Bug on back button

ionic-v1
1

Hello,

I’m trying to make a simple app with ionic, but the navigation part is giving me the worst time.
I have 4 tabs, and a setting button in the nav-bar that’s supposed to open a new view (not nested in the tab) to show the user’s settings.

My problem is: when I go to settings and then I press back, it works in the nav-bar, but not in the content view.
Meaning, I see that the nav-bar goes back to the previous state, but the content view stays the same.

As the back button was not showing on the settings view, i used:

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
  viewData.enableBack = true;
});

Maybe it comes from this… Maybe if I have to force show this button I made something wrong before in the code structure.

here is an extract of the index.html:

  <body ng-app="starter" ng-controller="MainCtrl">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="right">
        <button class="button button-clear" ui-sref="settings" nav-direction="forward">
          <i class="icon ion-ios-gear"></i>
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

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

    </ion-nav-view>
    <ion-nav-view name="settings" view-title="Settings"></ion-nav-view>

  </body>

The complete settings.html:

  <ion-view name="settings" view-title="Settings">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button />
    </ion-nav-bar>
    <ion-content class="padding">
      <h2>Use the settings to set some stuff up</h2>
    </ion-content>
  </ion-view>

The states in app.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.news', {
  url: '/news',
  views: {
    'tab-news': {
      templateUrl: 'templates/tab-news.html',
      controller: 'NewsCtrl'
    }
  }
})

[...] other tab states [...]

.state('settings', {
  url: '/settings',
  views: {
    'settings': {
      templateUrl: 'templates/settings.html',
      controller: 'SettingsCtrl'
    }
  }
});

This “nearly working” state is really driving me crazy, could you give me a hand on this?

2

I have similar strange behaviors with 1.3.1 and the current nightly build however 1.3.0 works and behaves as I expect it to.

Maybe give a try to 1.3.0 in the meantime, You can still grab it from here:
http://code.ionicframework.com/#1.3.0

I didn’t manage to find a solution actually and was surprised nobody else complained so I came to the conclusion it’s something on my side in my old project which I keep updating since beta versions of Ionic…

3

Hello ferretizer and thanks for your answer.
Sadly I tried with 1.3.0 but it did not work either.
The only solution I found (and it’s not working so well) was to create another abstract state:

  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.news', {
    url: '/news',
    views: {
      'tab-news': {
        templateUrl: 'templates/tab-news.html',
        controller: 'NewsCtrl'
      }
    }
  })
  [...] other tab states [...]
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/app.html'
  })

  .state('app.settings', {
    url: '/settings',
    views: {
      'app-settings': {
        templateUrl: 'templates/app-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  });

Now when I press the button I call ui-sref=“app.settings”.
Here it works, i change view like I want, I can do back. But I don’t have any transition animation.
So by adding nav-direction=“forward” to the button I have a weird transition (it works, but there’s some black appearing in the previous view being transitioned), but then i don’t have the transition when i press back (even if I add nav-direction=“backward” to the back button).

I’m new to Ionic and AngularJS, so I’m certain i must be doing something wrong, either with Ionic, or with ui-router.