angular ui-router state child view not updating after edit

Question

When I make changes to the template from an sub state and I go to the view again the first loaded (so before the template was updated) view is given.

I have tested it with google chrome. internet explorer, microsoft edge all the same problem.

my state

    $stateProvider
        .state('games', {
            abstract: true,
            url: "/?username&token",
            templateUrl: "games/views/Games.html",
            controller: 'GamesController'
        })
        .state('games.open', {
            url: '',
            templateUrl: "games/views/GamesOpen.html"
        })
        .state('games.active', {
            url: "/active",
            templateUrl: "games/views/GamesActive.html"
        })

HTML

    <a ui-sref=".open"><button>open games</button></a>
    <a ui-sref=".active"><button>active games</button></a>
    <div ui-view></div>

The problem seems to be that the views are cached, the transitions work perfectly only I can't view the updated template and always see the first loaded template that was loaded and never the updated version..

A similair question fixes it by adding ?'+ new Date() at the end of the url but this looks like a hack.

Answer 1

you don't have any url in your game.open state: please check that.i guess that is an issue.

When i was creating an app

i used this code :

(well in my case in my certain app )

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

$stateProvider.state('list',{
   url:'/list',
 templateUrl:'templates/list.html'
});


$stateProvider.state('edit',{
   url: '/edit/:noteId',
    templateUrl: 'templates/edit.html',
    controller:'EditCtrl'
});

$stateProvider.state('add',{
       url: '/add',
      templateUrl: 'templates/edit.html',
      controller:'AddCtrl'
    });

$urlRouterProvider.otherwise('/list');

});

and use a button like this:

 <a href="#/add" class="button button-assertive ion-left ion-compose">New Note</a>