Clicking on the link does not reload the controller
I have an Ionic app where I want the controller to reload whenever the user visits a tab. I have the following link here ...
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ui-sref="tab.profile({reload: true})">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
If I go to the tab once, the controller loads (obviously). If I leave the page and click that link again, the page does not reload. The way I am detecting this page reload is by pasting console.log
in the controller file.
angular.module('coolsite.user')
.controller('ProfileController', profileController)
profileController.$inject = [];
function profileController( ) {
var vm = this;
console.log("activated");
}
How do I reload the controller every time the user clicks on a link?
source to share
You must use transitionTo
to reload the controller and route.
Markup
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ng-click="vm.redirect('tab.profile')">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
controller
vm.redirect = function(stateName){
$state.transitionTo(stateName, {} , {
reload: true,
inherit: false,
notify: true
});
}
Update
Although it was not associated with angular-ui-router
it specifically ionic-view
, they get cached by default. You need to disable stateful caching just by checking cache: false
.
code
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tabs/profile.html',
controller: 'ProfileController as profile',
reload: true
}
},
cache: false
})
There are also two alternative ways to achieve this, you can find it in this answer with a better explanation given by me alone
source to share
So, I think what you really want to do is not use the cache. This means that in your condition you need to install cache: false
. To be clear, the controllers are not "reloaded". The scope is just removed and added again when you return to the page, unless you set the cache to false.
I don't think there is necessarily a better approach. I would use events in the navigation lifecycle and set up a handler for the $ionicView.loaded
. Detailed information on the event can be found in ion-view in the document under: View Lifecycle and Events.
source to share