将超时传递给角引导模式

时间:2020-12-30 19:37:29

I'm trying to pass a timeout to a bootstrap modal in Angular JS, in order to show a couple of buttons and cancel that timeout if one of them is clicked

我试图将超时传递给角度为JS的引导模式,以便显示两个按钮,并在单击其中一个按钮时取消超时

The scenario of what I'm trying to do: I have a sessión that expires in 3 minutes, so in 1.5 minutes I show that modal to the user prompting if he wants to extend the session, if he clicks "Ok", I cancel the timeout and call a function that reset the notification again.

的场景,我想做的事:我有一个会议,将于3分钟,所以在1.5分钟我向用户表明模态提示如果他想延长会话,如果他点击“Ok”,我取消超时并再次调用一个函数重置通知。

If i try to pass it using the resolve that comes with the Modal, the modal launches just when the Timeout ends, (i guess this might be since it's a promise)

如果我尝试用模态的解析传递它,模态就会在超时结束时发射(我想这可能是因为它是一个承诺)

This doesn't has to be the solution but it's what i came up with, if anyone else has a better way or practice, I'll appreciate if you can share

这并不一定是解决办法,但这是我想到的,如果其他人有更好的方法或实践,我将感激你能分享。

Here is the plunker to see it

这是柱塞

Code

JS

JS

angular.module('app', ['ui.bootstrap'])
.controller('Main', MainCtrl);

MainCtrl.$inject = ['$modal', '$timeout'];
function MainCtrl($modal,$timeout) {
  var vm = this;

  vm.callModal = callModal;
  /*vm.people = [
    'Fred',
    'Jim',
    'Bob'
  ];*/
  vm.time = $timeout(function() { // Timeout 
    alert("timeout ended");
  }, 10000);

  function callModal() {
    $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', 'time', ModalCtrl],
      controllerAs: 'vm',
      resolve: {
        time: function () { return vm.time; }
      }
    });
  }
}

function ModalCtrl($modalInstance, time) {
  var vm = this;

  console.log(time);

}

Main

主要

 <body ng-controller="Main as vm">
    <button type="button" class="btn btn-sm btn-primary" ng-click="vm.callModal()">Call modal</button>
 </body>

Modal

模态

<div class="modal-header">
    <h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
    {{ vm.timeout }}
</div>
<div class="modal-footer">
    <button class="btn" ng-click="$close()">Cancel</button>
</div>

1 个解决方案

#1


2  

So you want to close the modal from outside.

所以你想要从外部关闭模态。

Check this fork.

检查这个叉。

You have to setup the modal instance in your controller and close it after the timeout.

您必须在控制器中设置模态实例,并在超时后关闭它。

  vm.time = $timeout(function() { // Timeout 
    alert("timeout ended");
    if(vm.modal)
      vm.modal.dismiss('cancel')
  }, 10000);

  function callModal() {
    vm.modal = $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', ModalCtrl],
      controllerAs: 'vm'
    });
  }

#1


2  

So you want to close the modal from outside.

所以你想要从外部关闭模态。

Check this fork.

检查这个叉。

You have to setup the modal instance in your controller and close it after the timeout.

您必须在控制器中设置模态实例,并在超时后关闭它。

  vm.time = $timeout(function() { // Timeout 
    alert("timeout ended");
    if(vm.modal)
      vm.modal.dismiss('cancel')
  }, 10000);

  function callModal() {
    vm.modal = $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', ModalCtrl],
      controllerAs: 'vm'
    });
  }