Estou fazendo um aplicativo de amostra para autologut se o usuário ficar inativo por 30 minutos. antes de 1 minuto para fazer o logOut deve mostrar uma mensagem de aviso ao usuário.
Portanto, calculei os minutos e mostrei as mensagens de aviso no Bootstrap. Mas a mensagem de alerta não está sendo exibida corretamente durante a execução. O alerta de Javascript está funcionando bem, mas o alerta de Bootstrap não está funcionando.
<! 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 =” angular.js @ 1 .4.0 “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-hazard”>
<strong> Erro: </strong> {{errorMesage}}
{{error}} </p>
</div>
</body>
</html>
Alerta de bootstrap não mostrado em $ stateChangestart.