Template Does Not Update When Using Ui-Router and Ion-Tabs

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

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

Angular routing issue - ionic header not updated in tab

Typo in your HTML

it should be ion-nav-view instead of ionic-nav-view

<ion-nav-view name="calendar-tab"></ion-nav-view>

instead of

<ionic-nav-view name="calendar-tab"></ionic-nav-view>

Routing issue with ui-router in ionic (AngularJS)

As pointed out in the comments: the view is cashed and therefore the controller is not initialized the second time you visit the page.

One solution was not mentioned in Template does not update when using ui-router and ion-tabs. (change cashing to false in view or in router) therefor I adding an extra answer here (better was adding it to comments but with the code example this would become unclear)

Listen in your controller (or directive) to the $ionicView.beforeEnter event to know when a view is active.

.controller('RoomoneCtrl', function($scope, $rootScope) {
    $scope.$on('$ionicView.beforeEnter', function () {
        // (on first time added to DOM and after the view becomes active after cached
        // change some value on your scope
        $scope.date = new Date();
        console.log("I am in room one");
    });
});

For ionic view events see: http://ionicframework.com/docs/api/directive/ionView/

Ionic tabs navigation issue

Finally I've found a solution, which is to add " <ion-content> </ion-content> to the file where I have three tabs (live.html).

You can take a loot at the updated demo for someone who have the same complicated views architecture

Angular-UI router not working in Ionic app

try

.state('login', {
  url: '/login',
  templateUrl: 'app/login/login.html',
  controller: 'LoginController as login'
})

---

Related Topics