Template does not update when using ui-router and ion-tabs

Question

CODE

http://codepen.io/hawkphil/pen/LEBNVB

I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:

link1: tab 1.1 and tab 1.2

link2: tab 2.1 and tab 2.2

I am using ion-tabs for each page to contain the 2 tabs.

This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?

There seems to be some caching problem or something.

HTML

<title>Tabs Example</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-balanced">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="link1">
          Link 1
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="link2">
          Link 2
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-calm">
      <h1 class="title">Right Menu</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list list-inset">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search">
        </label>
      </div>
      <div class="list">
        <a class="item item-avatar" href="#">
          <img src="img/avatar1.jpg">
          <h2>Venkman</h2>
          <p>Back off, man. I'm a scientist.</p>
        </a>
      </div>
    </ion-content>
  </ion-side-menu>
  </ion-side-menus>
</ion-side-menus>

<script id="link1.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 1.1</p>
        </ion-content>
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 1.2</p>
        </ion-content>
      </ion-view> 
    </ion-tab>

  </ion-tabs>
</script>

<script id="link2.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 2.1</p>
        </ion-content>
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 2.2</p>
        </ion-content>
      </ion-view> 
    </ion-tab>

  </ion-tabs>
</script>

JS

angular.module('ionicApp', ['ionic'])

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

  $stateProvider
    .state('link1', {
      url: "/link1",
      views: {
        'menuContent': {
          templateUrl: "link1.html"
        }
      }
    })
    .state('link2', {
      url: "/link2",
      views: {
        'menuContent': {
          templateUrl: "link2.html"
        }
      }
    });

   $urlRouterProvider.otherwise("/link1");

})

.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {

  $rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
    console.log(toState);
  });

}])

Answer 1

You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.

Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.

nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),

I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.

Working Codepen with 1.0.0-beta.13

Update:

Your problem is your view are getting cached because by default caching is enabled inside your ionic app.

Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)

By default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained.Maximum capacity of caching view is 10.

So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.

So in your case this is what exact problem, your 1st view is getting cache & showing it again & again

There are 3 ways to solve this issue

1. Disable cache globally

Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.

$ionicConfigProvider.views.maxCache(0);

Codepen

2. Disable cache within state provider

$stateProvider
.state('link1', {
  url: "/link1",
  cache: false,
  views: {
    'menuContent': {
      templateUrl: "link1.html"
    }
  }
})
.state('link2', {
  url: "/link2",
  cache: false,
  views: {
    'menuContent': {
      templateUrl: "link2.html"
    }
  }
});

Codepen

3. Disable cache with an attribute

    <ion-tab title="Home" icon="ion-home">
      <ion-view cache-view="false" view-title="Home">
        <!-- Ion content here -->
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view cache-view="false" view-title="Home">
        <!-- Ion content here -->
      </ion-view> 
    </ion-tab>

Codepen

I believe the updated approach would be great to implement. Thanks.

Github issue for the same issue link here