Navigation not working as expected

ionic-v1
1

I’m new to Ionic and trying to figure out this navigation stack and how it works. I’ve gone through and replaced the “friends” and “friend” references in the tab sample project with “directory” and “contacts.” However, the navigation doesn’t seem to be functioning properly. The url changes appropriately but the appropriate contact-details.html template file isn’t used, nor is the ContactDetailCtrl ever being called. What am I doing wrong?

Hosted example:
http://rubiware.com/ionic/

The directory structure is the same as the sample projects, IE:

JS files:
http://rubiware.com/ionic/js/app.js
http://rubiware.com/ionic/js/controllers.js
http://rubiware.com/ionic/js/services.js

Template files:
http://rubiware.com/ionic/templates/contact-detail.html
http://rubiware.com/ionic/templates/tab-dashboard.html
http://rubiware.com/ionic/templates/tab-directory.html
http://rubiware.com/ionic/templates/tab-settings.html
http://rubiware.com/ionic/templates/tabs.html

Is there an easier way to debug these types of problems with Ionic? There are really no errors on the console that point me in the right direction. If someone could point me to the mistake and help me back on track, I’d really appreciate it. Thanks!

2 
.state('tab.directory', {
  url: '/directory',
  views: {
    'tab-directory': {
      templateUrl: 'templates/tab-directory.html',
      controller: 'DirectoryCtrl'
    }
  }
})
.state('tab.contact-detail', {
  url: '/contact/:contactId',
  views: {
    'tab-contact': {
      templateUrl: 'templates/contact-detail.html',
      controller: 'ContactDetailCtrl'
    }
  }
})

It’s because your view outlets don’t match, one is tab-directory and one is tab-contact. So the url will update but it doesn’t know where to put the data.

1 Like
3

Oh!

That makes sense. I wasn’t sure how the framework determined where to put a “pushed” view. Thanks for clearing that up for me! :smile: