Search code examples
angularjsangularjs-routingionic-frameworkui-sref

Navigation works in browser but not in Ionic View iphone app


I have a tabbed application that started out as ionic start myApp tabs. I've been editing it and I added a page called count.html which shared the DashCtrl controller. I link to it in the Dash Tab and it works fine when I'm testing in Chrome on my computer, but when I use the Ionic Viewer, it does not navigate; it just stays on the Dash Tab page as if nothing were supposed to happen.

How do I fix the navigation for the device?

tab-dash.html

<ion-view view-title="Test">

  <ion-content class="padding">

    <button class="button button-full button-positive" ui-sref="tab.count">
        Count
    </button>

  </ion-content>
</ion-view>

count.html

<ion-view view-title="Count">

    <ion-nav-bar class="bar-energized">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>

  <ion-content class="padding">

  </ion-content>
</ion-view>

app.js

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

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.count', {
    url: '/count',
    views: {
      'tab-dash': {
        templateUrl: 'templates/count.html',
        controller: 'DashCtrl'
      }
    }
  })

Solution

  • This appears to be an Ionic View bug. As soon as I killed the app from Switcher, the routing worked properly. Edit: Confirmed to be a caching bug with UIWebView in the Ionic View application.

    https://github.com/driftyco/ionic-view-issues/issues/10

    It seems that no matter what cache policy you set, it will only apply to the initial request (in this case index.html) and load all CSS and JS from the cache no matter what.