1

ng-idle は、角度アプリがユーザーがアイドル状態かどうかを確認できるようにする、ここにあるカスタム角度ディレクティブです。

$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 であり、タイムアウトが開始したことを示しますが、アプリはそれに応じて更新されません。logout が false の場合、ユーザーはログイン画面に戻る必要があります。これは、ユーザーがログアウト ボタンをクリックすると機能しますが、タイムアウトしたこのインスタンスでは機能しません。

4

1 に答える 1

0

なんらかの理由で、変数が変更された後にアプリが更新されなかったことが問題だったようです。これは、追加することで修正されました

$scope.$apply();

IdleTimeout 関数で 2 つのブール値が false に設定された後。

于 2015-06-23T14:39:14.053 に答える