AngularJS load data on state load

Question

I have a page in my Angular.js app that does a http request and fills in some textboxes with the results.

I navigate to this page by using :

$state.go('utab.history');

but when it gets to the page all the textboxes are blank, i am currently using Ionics ion refresher :

<ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="showappraisal()">
</ion-refresher>

to call the controllers function which then populates all the textboxes, but now the apps nearly done i need to solve this issue.

I have tried using $rootScope.$emit("CallParentMethod", {}); just before $state.go('utab.history'); and it does run the function but again, it just doesnt populate the textboxes until i do the pull refresh (even though they call the same function).

Is there a way to get an event when utab.history loads?

i think we need some more code to resolve this. Like how do you load your data exactly. — Walfrat, Apr 22 '16 at 13:13

score 0 · Answer 1 · answered Apr 22 '16 at 13:00

0

I believe your question is a little bit vague. But if I understand it correctly you can do this:

You can send a data to a state by

$state.go('myView', { myKey: myData });

And access the data from

$stateParams.myKey

Additionally, don't get trigger the get request event with any events, you can use $ionicView.beforeEnter event to understand when the page is loaded (even though there exist cache in Ionic in default)

answered Apr 22 '16 at 13:00

Yagiz

1,033
2
21
47

I dont want to send data, when i do $state.go('utab.history'); i want to be able to run a function in that controller. currently if that state was already open it does nothing just takes you to the page. – G.Smith Apr 22 '16 at 13:02
Okay then, `$ionicView.beforeEnter` will be called everytime the page is loaded even though there is a cache. – Yagiz Apr 22 '16 at 13:04
thats exactly what i was looking for thanks very much – G.Smith Apr 22 '16 at 13:08
Not a problem. Please accept my answer in StackOverflow for the sake of the community :) – Yagiz Apr 22 '16 at 13:08

score 0 · Accepted Answer · answered Apr 22 '16 at 13:24

Add a listener function in your view controller, and make changes whatever you want.

app.controller("yourcontroller", ['$scope', '$ionicView', function($scope, $ionicView){

    $scope.$on('$ionicView.afterEnter', function(e){
        //You can call your functions
    });

});

or

app.controller("yourcontroller", ['$scope', '$ionicView', function($scope, $ionicView){

    $scope.init = function(){
        $scope.$on('$ionicView.afterEnter', function(e){
            //You can call your functions
        });
   }

$scope.init(); //initialize by your own

});

There are so many events are available while navigating from one view to another.

Available Events:
loaded, enter, leave, beforeEnter, beforeLeave, afterEnter, afterLeave, unloaded.

You can listen any of the above events for your convenience.

Refernce : http://ionicframework.com/docs/api/directive/ionView/

score 0 · Answer 3 · answered Apr 22 '16 at 16:32

0

 $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
      if(toState == 'utab.history')
      {
          // do your stuff
      }
 });

answered Apr 22 '16 at 16:32

Simon Schüpbach

2,625
2
13
26

score 0 · Answer 4 · answered Jul 21 '20 at 13:00

0

You can check this out. It worked for me.

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Documentation: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload

Reference

answered Jul 21 '20 at 13:00

krunal.cp

93
1
13

score -1 · Answer 5 · answered Apr 22 '16 at 13:06

-1

You can call showappraisal() in your controller's constructor:

angular.controller('myId', function(){

  this.showappraisal = function() {
    //logic to load data here
  };

  //this will do the call when the controller is created which should happen when the state is started
  this.showappraisal();

});

answered Apr 22 '16 at 13:06

pgreen2

3,601
3
32
59

Are you referring to the html page or the state? – pgreen2 Apr 22 '16 at 14:40
Then why you define a function? In that case you can write the code directly in the controller. – Simon Schüpbach Apr 22 '16 at 16:27
The code is put into a function because it can be called by `ion-refresher` to refresh the data on demand from the user. – pgreen2 Apr 22 '16 at 17:53

AngularJS load data on state load

5 Answers5