Ion-View不刷新（Angular UI-Router）

Question

I have this classic ionic view refresh problem:

.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
   .state('app.menu', {
    url: "/menu",
    views: {
      'menuContent': {
        templateUrl: "templates/headmenu.html"
      }
    }
  })
  .state('app.menu.media', {
    url: "/media/:MediaType",
    views: {
      'media-tab': {
        templateUrl: "templates/tabs/media.html",
        controller: "MediaCtrl"
      }
    }
  }).state('app.settings', {
    url: "/settings",
    views: {
      'settingsContent': {
        templateUrl: "templates/settings.html",
        controller: "SettingsCtrl"
      }
    }
  })

The app start from 'app.menu.media' state, I click on 'settings', the view is loaded, but the problem occurs when I try going back to 'app.menu.media' state, the view is not refreshed (I still have the 'settings' view)

One of the solutions suggested by other devs is using ui-sref-opts="{reload: true, notify: true}" inside a <a ui-sref="app.menu.media" ...> ..</a> tag, but it's not smooth, the users feel like if the app freezes for a short time, and the same goes for the javascript solution: $state.go('app.menu.media', {}, {reload: true});

I know that the controller is not loaded when it is in the same state, but in this example we have different controllers: "MediaCtrl" and "SettingsCtrl", so why we have this problem? Is there any clean solution to fix this problem?

Edit: This problem occurs even if I'm disabling the cache: $ionicConfigProvider.views.maxCache(0);

Answer 1

After Debuging the app, I found that the problem was not related to cache, but it doesn't mean that enabling the views cache will not affect the app, disabling the cache was important for my case.

So the problem was related to the fact that I was using the same state " app " for both ' media ' and ' settings ' views, with different view names: " settingsContent " for "app.settings" and "menuContent" for "app.menu". So I had to add these two Ion-nav-views to the template Url linked to the " app " state, which is " menu.html ", juste like this:

 <ion-nav-view name="menuContent"></ion-nav-view>
 <ion-nav-view name="settingsContent"></ion-nav-view>

So when I go back to " app.menu.media " state, the view is indeed loaded, but the " settings " view is still there, and it is hiding my new requested view " media "!

So what I did to fix this issue is to use the same Ion View name:

.state('app.menu', {
url: "/menu",
views: {
  'THESAMENAME': {
    templateUrl: "templates/headmenu.html"
  }
}...
....
.state('app.settings', {
url: "/settings",
views: {
  'THESAMENAME': {
    templateUrl: "templates/settings.html",
    controller: "SettingsCtrl"
  }
}

And inside menu.html, I deleted the two previous lines, and replaced theme with:

<ion-nav-view name="THESAMENAME"></ion-nav-view>

I hope this could help someone