ng-idle 是一个自定义 Angular Directive(指令),可以在 here 中找到这允许您的 Angular 应用程序检查用户是否空闲。
以前使用过该指令的人是否知道在编辑该指令的属性时 $scope
是否存在问题?
这是我的 JS:
// include the `ngIdle` module
var app = angular.module('demo', ['ngIdle', 'ui.bootstrap']);
app
.controller('EventsCtrl', function($scope, Idle, $modal) {
$scope.logIn = function(){
$scope.loggedIn = true;
Idle.watch();
};
$scope.logOut = function(){
$scope.loggedIn = false;
Idle.unwatch();
};
$scope.events = [];
$scope.$on('IdleStart', function() {
$scope.amIdle = true;
});
$scope.$on('IdleWarn', function(e, countdown) {
// follows after the IdleStart event, but includes a countdown until the user is considered timed out
// the countdown arg is the number of seconds remaining until then.
// you can change the title or display a warning dialog from here.
// you can let them resume their session by calling Idle.watch()
});
$scope.$on('IdleTimeout', function() {
// the user has timed out (meaning idleDuration + timeout has passed without any activity)
// this is where you'd log them
$scope.loggedIn = false;
$scope.amIdle = false;
Idle.unwatch();
console.log("Timeout has been reached");
console.log($scope.loggedIn);
});
$scope.$on('IdleEnd', function() {
// the user has come back from AFK and is doing stuff. if you are warning them, you can use this to hide the dialog
$scope.amIdle = false;
});
/*$scope.$on('Keepalive', function() {
$scope.amIdle = false;
});*/
})
.config(function(IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(1); // in seconds
})
登录/注销的东西只是控制loggedIn变量的基本东西,它只是与ng-show一起使用来拥有一个非常基本的登录屏幕来测试ng-idle的超时功能。空闲/检测用户是否回来也很好,唯一的问题是 $scope.$on('IdleTimeout')
函数。
程序到达控制台日志,并显示两个登录都是错误的,并且超时已开始,但应用程序没有相应更新。当注销为 false 时,用户应返回到登录屏幕,该屏幕在用户单击注销按钮时起作用,但在超时的情况下不起作用。
最佳答案
问题似乎是,无论出于何种原因,应用程序在变量更改后都没有更新。通过添加修复了此问题
$scope.$apply();
在 IdleTimeout 函数中将两个 bool 值设置为 false 后。
关于javascript - 使用 ng-idle 时访问范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31004724/