【问题标题】:Pass a timeout to angular bootstrap Modal将超时传递给角度引导模态
【发布时间】:2015-10-09 20:58:46
【问题描述】:

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

我正在尝试做的场景:我有一个 3 分钟后到期的会话,所以在 1.5 分钟内我向用户显示该模式,提示他是否要延长会话,如果他点击“确定” ,我取消超时并再次调用重置通知的函数。

如果我尝试使用 Modal 附带的解析来传递它,则模式会在 Timeout 结束时启动,(我猜这可能是因为它是一个承诺)

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

Here is the plunker to see it

代码

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>

【问题讨论】:

    标签: javascript angularjs controller timeout angular-ui-bootstrap


    【解决方案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'
        });
      }
    

    【讨论】:

    • 我已经尝试过了,它工作正常,但我需要从模式外部超时,以及其他场景,我有一个在 3 分钟内到期的会话,所以在 1.5 分钟内我向用户显示该模式,提示他是否要延长会话,如果他单击,我会取消超时并调用再次重置通知的函数
    • 所以用户有 10 秒的时间点击继续会话。我仍然认为您不需要将超时“传递给模态”。但是如果你还想那样做,vm.time 必须是执行超时的函数,而不是超时执行本身。
    • 改了答案,看看吧。
    • 谢谢,我会更新plunker试试看,当你说你认为我不需要超时,你认为我还能做什么?
    • 我不需要在模态调用后运行超时,即使在调用模态后我也需要它运行。尽管您的回答部分有效
    猜你喜欢
    • 2014-11-13
    • 1970-01-01
    • 2018-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-30
    • 1970-01-01
    相关资源
    最近更新 更多