I am doing sample application to autologut if user is idle for 30 Min. before 1 minutes to logOut have to show an warning message to the user.
So i have calculated the minutes and show the warning messages in Bootstrap. But alert message is Not showing properly inside run. Javascript alert is working fine but Bootstrap alert is not working.
app.run(function ($rootScope, $cacheFactory, $interval, $timeout) { alert('1 more sec'); function load() { alert('you have 1 more sec to autoLogOut'); $rootScope.showError = true; $rootScope.error = "helloo"; $rootScope.errorMessage = 'you have 1 more sec to autoLogOut'; $timeout(function () { $rootScope.doFade = true; }, 2500); } // Execute every time a state change begins $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, $rootScope) { load(); }); }); Its working inside run block.
Problem: Not working under
In Html:
<!DOCTYPE html> <html ng-app="app"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script data-require="[email protected] " data-semver="1.4.0 " src="https://code.angularjs.org/1.4.0/angular.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script> <script> var app = angular.module('app', ['ui.router']); app.run(function ($rootScope, $cacheFactory, $interval, $timeout) { alert('1 more sec'); function load() { alert('you have 1 more sec to autoLogOut'); $rootScope.showError = true; $rootScope.error = "helloo"; $rootScope.errorMessage = 'you have 1 more sec to autoLogOut'; $timeout(function () { $rootScope.doFade = true; }, 2500); } // Execute every time a state change begins $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, $rootScope) { load(); }); }); </script> </head> <body> <div data-ng-show="showError" ng-class="{fade:doFade} " class="alert alert-danger "> <strong>Error:</strong>{{errorMesage}} <p> {{error}}</p> </div> </body> </html> Inside the $stateChangeStart , it is not working.
