如何在角度烤面包机上显示倒数计时器

时间:2016-01-05 15:59:17

标签: javascript angularjs

我正在使用ng-Idle(ngIdle)和Angular Toaster(烤面包机)模块。我想在ng-idle的IdleWarn事件中显示一个带有倒计时值的烤面包机消息。

$scope.$on('IdleWarn', function(e, countdown) {
      console.log("Timeleft: " + countdown);
      toaster.warning('Title', '<section>' + countdown + '</section>', 0, 'trustedHtml', undefined, undefined, true, undefined, undefined);
    }

这仅使烤面包机具有静态倒计时值。如何使用此烤面包机实现倒数计时器以显示倒计时。

1 个答案:

答案 0 :(得分:1)

我设法通过直接编辑message属性来解决它。确保您使用的是最新版本的角度烤面包机(在撰写本文时为v.1.1.1)。

var sessionToast;
$scope.toastr = // Injected via angularJS

$scope.$on('IdleWarn', function (e, countdown) {

if (sessionToast) {
    sessionToast.scope.message = countdown + ' seconds';
    sessionToast.scope.$digest();
}
else {
    sessionToast = self.toastr.warning(countdown + ' seconds', 'You will be logged out due to inactivity in:', {
        timeOut: 0,
        preventDuplicates: true,
        onHidden: () => {
            sessionToast = undefined;
        }
    });

}


});

$scope.$on('IdleEnd', function () {
    $scope.toastr.clear();
});

$scope.$on('IdleTimeout', function () {
    // do logout
    $scope.toastr.clear();
    // Maybe show a you have been logged out message.
});