In my AngularJS app, I'd like to create a timer, sothat user is redirected from any page off my app to the landing page, if he's idle for 10 seconds.
To do this, I created necessary timer functions in an controller:
.controller('LandingCtrl', ['$scope', '$rootScope', '$timeout', '$state',
function($scope, $rootScope, $timeout, $state) {
$rootScope.new_timer = function() {
$rootScope.mytimer = $timeout(function() {
$rootScope.$broadcast("timeover");
console.log("timeover event sent");
}, 10000);
}
$rootScope.cancel_timer = function() {
$timeout.cancel($rootScope.mytimer);
}
$rootScope.raz_timer = function() {
$rootScope.cancel_timer();
$rootScope.new_timer();
}
}])
Then, in every other controllers, I add something like:
$scope.$on("timeover", function() {
$state.go('Landing');
})
Now, the only missing thing is to create a global event listener that would use the raz_timer()
function when a user touch the screen of the app.
Any idea how to do this?
Note : I'm using Ionic Framework on top of AngularJS, and app is used throw a mobile device, not a desktop (I guess this could be usefull to know what event to pick).