Usualmente no debes usar funciones y eventos ajenos a angular a menos que sea absolutamente necesario. La razón de esto es porque entonces debes usar constantemente $scope.$apply
para que la vista actualize y esto a la vez te puede generar un error
$apply already in progress
angular.module('app', [])
.controller('DigestCtrl', function($scope) {
$scope.$apply();
$scope.$apply();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app" ng-controller="DigestCtrl">
</div>
Te puedes encontrar en internet un truco como el siguiente
// NO LO USES
if (!$scope.$$phase) $scope.$apply();
No te lo recomiendo y en realidad dicha recomendación viene del propio equipo de angular, lee
When to use $scope.$apply()
Antipatrones
Se puede resumir en esto
No hagas if (!$scope.$$phase) $scope.$apply()
, esto sólo significa que tu $scope.$apply()
no está lo suficientemente alto en la pila de ejecución
y
$scope.$apply()
debería ocurrir tan cerca del binding del evento asincrónico como sea posible.
Te muestro tu código como sería con $scope.$apply
var modulo = angular.module('appModule', [])
.controller('nameCtrl', function($scope) {
$scope.userlogued = true;
$.idle(20, function() {
$scope.$apply(function() {
$scope.userlogued = false;
});
alert('Llevas 20 segundos inactivo');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appModule" ng-controller="nameCtrl">
Espere 20 segundos sin actividad
<br>
Usuario logueado: {{userlogued}}
</div>
Y la opción recomendada, usar un módulo de angular que haga lo mismo que quieres.
Ejemplo ng-idle
angular.module('app', ['ngIdle'])
.controller('IdleCtrl', function($scope, Idle) {
$scope.userLogged = true;
Idle.watch();
$scope.$on('IdleEnd', function() {
$scope.userLogged = false;
});
})
.config(function(IdleProvider) {
IdleProvider.idle(20); // in seconds
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/HackedByChinese/ng-idle/develop/angular-idle.min.js"></script>
<div ng-app="app" ng-controller="IdleCtrl">
Espere 20 segundos sin actividad
<br>
Usuario logueado {{userLogged}}
</div>
$.idle
que estás usando?