JQuery BlockUI插件和Angular:将ajax调用时间显示为增量秒,代替微调器图像

时间:2014-04-29 15:16:46

标签: jquery ajax angularjs jquery-blockui

我试图显示ajax调用的执行时间,而不是标准的ajax微调器。我正在使用JQuery的BlockUI插件。我考虑过做以下事情:

$.blockUI.defaults = {
    // message displayed when blocking (use null for no message)
    message:  $scope.runningTime,

然后在某处

 $(document).ajaxStart($.blockUI); // add code to increment $scope.runningTime
//and do $scope.$apply();

我愿意接受其他建议。

1 个答案:

答案 0 :(得分:0)

结束以下解决方案:

<div id="runningTime" style="display:none">
{[{runningTime}]} seconds
</div>
<script src="{{ url_for('static', filename='js/jquery.blockUI.js') }}"></script>
<script>
$(function(){
  var $scope = angular.element($("body")).scope();
  $scope.start_time = new Date().getTime();
  $scope.intervalFn = null;

  $(document).ajaxStart(function(){
    $.blockUI({ message: $("#runningTime") });
    $scope.intervalFn = setInterval(function(){
      var ms = new Date().getTime() - $scope.start_time;
      $scope.runningTime = (ms/1000) % 60;
      try {
        $scope.$apply();
      } catch(err) {
        //do-nothing for now
      }

    },1000);


  });

  $(document).ajaxStop(function(){
    $.unblockUI();
    clearInterval($scope.intervalFn);
  });
});  
</script>