Nav bar not working for view?

ionic-v1
1

I’m working off of the “cordova-seed” project on Github. I have 3 tabs, and a list view on each tab. The list links into another “detail” view. All 3 lists point at the same detail view. The only difference between the 3 tab lists is some filtering that I do server side.

Anyways, when I click an item in the list to get to my “detail” view, the nav bar doesn’t maintain any “back” navigation and the title doesn’t work when setting from a scope property, though I can set the title to a hard-coded string:

Example: http://d.pr/i/yWtB

My index.html has the following:

<nav-bar type="bar-assertive"
             animation="nav-title-slide-ios7"
             back-button-type="button-icon"
             back-button-icon="ion-ios7-arrow-back"></nav-bar>

<nav-view name="main"></nav-view>

My state registration for this detail view looks like this:

    .state('ticket-detail', {
      url: '/ticket/:ticketId',
      views: {
        'main': {
          templateUrl: 'templates/ticket-detail.html',
          controller: 'TicketDetailCtrl'
        }
      },
      requireLogin: true
    });

I put it under the main nav-view because I don’t want the tabs to keep showing while I’m on the detail screen.

My tabs live in “sub nav-views” I guess, just like the seed project. For example, in tabs.html:

<nav-view name="yours-tab"></nav-view>

And those states are registered like so:

    .state('tab.yours-index', {
      url: '/yours',
      views: {
        'yours-tab': {
          templateUrl: 'templates/yours-index.html',
          controller: 'YoursIndexCtrl'
        }
      },
      requireLogin: true
    })

How can I maintain the back navigation button for my detail view?

1 Like
2

I’m a little confused, what does your state for ‘tab’ look like? Here’s a diagram that illustrates how the navigation with ui-router works.

I’m not sure you can have a child state with multiple parents, but I am by no means the expert, hopefully @adam or @max can weigh in.

1 Like
3

Here is my entire app.js:

angular.module('snappy', ['ionic', 'snappy.services', 'snappy.controllers'])

.config(function($compileProvider, $httpProvider) {
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
  $httpProvider.interceptors.push('snappyRequestInterceptor');

  // Redirect all unauthorized operations...
  $httpProvider.responseInterceptors.push(function($q, $injector, AuthService) {
    return function(promise) {
      return promise.then(function(response) { return response; }, function(response) {
        if (response.status === 401 || response.status === 403) {
          AuthService.forgetAuthToken();
          $injector.get('$state').go('login');
        }
        return $q.reject(response);
      });
    };
  });
})

.factory('snappyRequestInterceptor', function($rootScope, AuthService) {
  return {
    request: function($config) {
      if (AuthService.hasAuthToken()) {
        $config.headers['X-Snappy-Token'] = AuthService.getAuthToken();
      }
      return $config;
    }
  };
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('login', {
      url: "/login",
      views: {
        'main': {
          templateUrl: 'templates/tabs.html',
          controller: 'LoginCtrl'
        }
      }
    })

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

    .state('tab.inbox-index', {
      url: '/inbox',
      views: {
        'inbox-tab': {
          templateUrl: 'templates/inbox-index.html',
          controller: 'InboxIndexCtrl'
        }
      },
      requireLogin: true
    })

    .state('tab.yours-index', {
      url: '/yours',
      views: {
        'yours-tab': {
          templateUrl: 'templates/yours-index.html',
          controller: 'YoursIndexCtrl'
        }
      },
      requireLogin: true
    })

    .state('tab.waiting-index', {
      url: '/waiting',
      views: {
        'waiting-tab': {
          templateUrl: 'templates/waiting-index.html',
          controller: 'WaitingIndexCtrl'
        }
      },
      requireLogin: true
    })

    .state('ticket-detail', {
      url: '/ticket/:ticketId',
      views: {
        'main': {
          templateUrl: 'templates/ticket-detail.html',
          controller: 'TicketDetailCtrl'
        }
      },
      requireLogin: true
    });

    $urlRouterProvider.otherwise('/tab/inbox');
})

.run(function($rootScope, $state, AuthService) {
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
    if (toState.requireLogin && ! AuthService.hasAuthToken()) {
        $state.go('login');
        event.preventDefault();
    }
  });
});
4

Can you put up a code sample on JsBin, or Plnkr or CodePen?

I’m having trouble understanding the problem.