将超时传递给 angular bootstrap 模态

Question

我正在尝试将超时传递给 Angular JS 中的 bootstrap 模态，以便显示几个按钮并在单击其中一个按钮时取消该超时

我正在尝试做的事情的场景：我有一个 sessión 在 3 分钟后到期，所以在 1.5 分钟后我向用户显示该模式提示他是否想延长会话，如果他点击 "Ok"，我取消超时并再次调用重置通知的函数。

如果我尝试使用模式附带的解析传递它，模式将在超时结束时启动，（我想这可能是因为它是一个承诺）

这不一定是解决方案，但这是我想出的，如果其他人有更好的方法或实践，如果您能分享，我将不胜感激

代码

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);

}

主要

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

模态

<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>

Answer 1

所以您想从外部关闭模态。

检查此 fork。

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

  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'
    });
  }

将超时传递给 angular bootstrap 模态

Pass a timeout to angular bootstrap Modal

javascript

timeout

controller

angularjs

angular-ui-bootstrap

代码