Run the controller function whenever a view is opened or displayed

Question

I am creating an application with angular + ionic that uses the classic three-button menu at the bottom with three ion tabs in it. When the user clicks the tab, this template opens through ui-router.

I have these states:

$stateProvider .state('other', { url: "/other", abstract: true, templateUrl: "templates/other/other.html" }) 

In the template, I am doing something like:

 <ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view> 

I know that I can write the doSomething () function in my controller and just call it manually. However, this gives me the same problem. I cannot figure out how to call the doSomething () function more than once when someone opens this view.

Currently, the doSomething () function is called just fine, but only the first time the user opens the view / tab window. I would like to call a function (to update geolocation) when the user opens this view or tab.

What would be the right way to implement this?

Thanks for the help!

Answer 1

If you have assigned a specific controller to your view, your controller will be called every time your view loads. In this case, you can execute some code in your controller immediately after calling it, for example, as follows:

 <ion-nav-view ng-controller="indexController" name="other" ng-init="doSomething()"></ion-nav-view> 

And in your controller:

 app.controller('indexController', function($scope) { /* Write some code directly over here without any function, and it will be executed every time your view loads. Something like this: */ $scope.xyz = 1; }); 

Edit: You can try to track state changes, and then execute the code when changing the route and visiting a specific route, for example:

 $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... }) 

Here you can find more detailed information: Status change events .

Answer 2

By default, your controllers were a cache, and that is why your controller only fired once. To disable caching for a specific controller, you must change your .config(..).state and set the cache parameter to false . eg:

  .state('myApp', { cache: false, url: "/form", views: { 'menuContent': { templateUrl: "templates/form.html", controller: 'formCtrl' } } }) 

for further reading, please visit http://ionicframework.com/docs/api/directive/ionNavView/

Answer 3

Following the answers and link from AlexMart , something like this works:

 .controller('MyCtrl', function($scope) { $scope.$on('$ionicView.enter', function() { // Code you want executed every time view is opened console.log('Opened!') }) }) 

Answer 4

I ran into the same problem, and here I leave the reason for this behavior for everyone else with the same problem.

Life cycle view

To improve performance, we have improved Ionic's ability to cache presentation elements and area data. After initialization of the controller, it can persist throughout the life of applications; Its just hidden and removed from the watch loop. Since we are re-creating the scope, we have added events for which we must listen when re-entering the view loop.

To see the full description and events of $ ionicView, go to: http://ionicframework.com/blog/navigating-the-changes/

Answer 5

For example, @Michael Trouw,

put this code inside your controller. it will run every time this state is entered or activated, you do not need to worry about disabling the cache, and this is the best approach.

 .controller('exampleCtrl',function($scope){ $scope.$on('$ionicView.enter', function(){ // Any thing you can think of alert("This function just ran away"); }); }) 

You can have more examples of flexibility, such as $ ionicView.beforeEnter →, which starts before the view is displayed. And there is one more thing.

Answer 6

Why don't you disable view cache with cache-view = "false" ?

In your opinion, add this to the ion-nav-like view:

 <ion-nav-view name="other" cache-view="false"></ion-nav-view> 

Or in your stateProvider:

 $stateProvider.state('other', { cache: false, url : '/other', templateUrl : 'templates/other/other.html' }) 

Any of them will always call your controller.

Answer 7

Given the ability of the ionic ability to cache view elements and scope data mentioned above, this may be a different way if you want to start the controller every time the view is loaded. You can globally disable the caching mechanism used by the ion path:

$ionicConfigProvider.views.maxCache(0);

Otherwise, the way I worked for me was doing

 $scope.$on("$ionicView.afterLeave", function () { $ionicHistory.clearCache(); }); 

This will clear the cache before leaving a view to restart the controller each time you re-enter.

Answer 8

This is probably what you were looking for:

Ionic caches your views and therefore your default controllers (max. 10) http://ionicframework.com/docs/api/directive/ionView/

There are events that you can connect to so that your controller can do certain things based on these ionic events. see here: http://ionicframework.com/blog/navigating-the-changes/

Answer 9

I had a similar problem with ion when I tried to load my own camera as soon as I select the camera tab. I solved the problem by installing the controller on the ion viewer component for the camera tab (in tabs.html), and then calling the $ scope method, which loads my camera (addImage).

In www / templates / tabs.html

  <ion-tab title="Camera" icon-off="ion-camera" icon-on="ion-camera" href="#/tab/chats" ng-controller="AddMediaCtrl" ng-click="addImage()"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab> 

The addImage method, defined in AddMediaCtrl, loads its own camera each time the user clicks the Camera tab. I did not have to change something in the angular cache for this to work. Hope this helps.