使用 ng-idle 时访问范围变量答案

【问题标题】：Accessing scope variables when using ng-idle使用 ng-idle 时访问范围变量
【发布时间】：2015-06-23 13:53:22
【问题描述】：

ng-idle 是一个自定义 Angular 指令，可以在 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') 函数。

程序到达控制台日志，并说两个登录都是错误的，并且超时已经开始，但应用程序没有相应地更新。当 logout 为 false 时，应将用户返回到登录屏幕，当用户单击注销按钮时该操作有效，但在这种情况下他们超时时无效。

【问题讨论】：

标签： javascript angularjs angularjs-scope ng-idle

【解决方案1】：

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

$scope.$apply();

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

【讨论】：