Trigger a function while change state(route)

Question

I am building a simple page applicatio(Mobile) by using IONIC + AngularJS I want to trigger a function when I change state. Below is my code to control the state.

var app = angular.module('App', ['ionic'])
var busyIndicator = new WL.BusyIndicator('content');
app.factory("busyIndicator",function()
{
    return busyIndicator;
}       
);
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
 )
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}
});
})

app.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
 .state('login', {
  url: "/login",
  views: {
      'viewLoader':{
      templateUrl: "views/login.html"}
  }
 })
.state('menu', {
  url: "/menu",
  abstract: true,
  views: {
      'viewLoader':{
      templateUrl: "views/menu.html",
          controller: 'AppCtrl'
    }
  }
 })
  .state('menu.customer', {
    url: "/customer",
    views: {
      'menuContent': {
        templateUrl: "views/customer.html",
            controller: 'CustomerCtrl'
      }
    }
  });

 $urlRouterProvider.otherwise('/login');
 })
.directive('appReady', function() {
 return {
  restrict: 'A',
   link: function(scope, element, attrs){
  console.log("Done rendering body");
  WL.App.hideSplashScreen();
 }
};
});

I had seen an similar question at this link: how to call a function in angularjs after change url

How should I add a function into this code ?

There are several approaches you could take, but it all comes down to: what do you want to do with this function you call? — , Aug 25 '15 at 12:07
So this is only for a few states? not all? why not simply do it in the controller of those states? — , Aug 25 '15 at 12:14
I am still a beginner of AngularJS, just wonder is there a method to trigger a function in code above, it is much more easy to maintain. — Anson Tan, Aug 25 '15 at 12:20
Yes, you can use ```resolve``` in the ui-router configuration — , Aug 25 '15 at 12:25
I saw from this link : http://stackoverflow.com/questions/24935529/how-to-call-a-function-in-angularjs-after-change-url , but I dont know how to implement. Can you provide me with a sample code ? thanks — Anson Tan, Aug 25 '15 at 12:34

score 1 · Accepted Answer · answered Aug 25 '15 at 12:42

1

This is one approach you could take, example for one destination route:

.state('example', {
            url: '/url',
            templateUrl: 'example.html',
            controller: 'ExampleController',
            resolve : {
                Timestamp: ['TimestampService', function(TimestampService){
                    return TimestampService.update(new Date());
                }]
            }

answered Aug 25 '15 at 12:42

Now I face another problems, it successfully call the service, but it doesn't change page – Anson Tan Aug 26 '15 at 02:04
This is... strange. Do you mean that it doesn't get to 'example'? Do you have any error in the console? – Aug 26 '15 at 07:29

score 0 · Answer 2 · answered Aug 25 '15 at 13:48

0

try using "$stateChangeSuccess" event

answered Aug 25 '15 at 13:48

maddygoround

2,145
2
20
32

Trigger a function while change state(route)

2 Answers2