javascript - 如何在 Angular toastr 上显示倒计时器

Question

我正在使用 ng-Idle(ngIdle) 和 Angular Toaster(toaster) 模块。我想在 ng-idle 的 IdleWarn 事件上显示带有倒计时值的 toastr 消息。

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

这只会呈现具有静态倒计时值的 toastr 。如何实现倒计时器来使用此 toastr 显示倒计时。

Answer 1

我通过直接编辑消息属性解决了这个问题。确保您使用的是最新版本的 Angular-toaster(撰写本文时为 v.2.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.
});