0

看来，在 angularJS 中允许空闲超时处理的唯一方法是使用由 HackedByChinese 制作的名为ng-idle的自定义指令。使用此指令时遇到的问题是，当我在超时后将用户注销时，什么也没有发生。

我正在做一些基本ng-show的事情，只是为了感受一下，它可以按预期工作，只要检测用户何时空闲，但是一旦用户达到超时状态，什么都不会发生。

这是我的 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.events = [];

    $scope.$on('IdleStart', function() {
        closeModals();   
        $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;
    });

    $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
})

还有我的 HTML：

<!DOCTYPE html>
<html lang="en-us" ng-app="demo">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-idle.js"></script>
<script src="app.js"></script>
<script src="ui-bootstrap-tpls-0.13.0.min.js"></script>

<body ng-controller="EventsCtrl">
    <div ng-show="!loggedIn">
        <label>Log In:<input type="text" name = "user">
            <button type = "submit" ng-click="logIn()">Submit</button>
        </label>
    </div>

    <div ng-show="loggedIn"><h2>NG-Idle test</h2>
        <center><div ng-show="amIdle">Yo wake up</div>
    </div>  
</body>
</html>
4

1 回答 1

1

看来问题在于无论出于何种原因，在更改变量后应用程序都没有更新。这是通过添加修复的

$scope.$apply();

在 IdleTimeout 函数中将两个布尔值设置为 false 之后。

于 2015-06-23T14:42:54.753 回答