在加载文件时显示一个加载指令

Display a loading directive while loading a file

本文关键字：加载 指令 一个 文件 显示      更新时间：2023-09-26

当我上传大于4MB的图像到我的程序时，我想显示加载图标。我目前正在尝试使用mdDialog，尽管这可能不是我需要做的。这段代码是if (fileSize < 8000000 && fileSize > 4000000)。然而，指令加载动画没有正确显示。所以我不确定如何做到这一点?

图片上传

if (fileSize > 8000000) {
  uploader.clearQueue();
  console.log("Error, the selected file is too large.  Image must be less than 8MB.")
}
else if (fileSize < 8000000 && fileSize > 4000000) {
  $mdDialog.show({
    templateUrl: 'controls/load-animate/load-animate-directive.tpl.html',
    controllerAs: 'loadAnimate'
  });
  fileItem.formData = [
    {
      "targetEntityId": $scope.targetEntityId,
      "entityType": $scope.entityType
    }
  ];
  $mdDialog.hide();
  $scope.uploader.uploadAll();
}

load-animate-directive.tpl.html 

<div id="load-animate-contain" class="layout-column layout-align-center-center">
  <div class="layout-column layout-align-center-center">
    <img id="load-circle-top" class="its-spinning" src="/images/img.loadCircle-top.png" />
    <img id="load-circle-bottom" src="/images/img.loadCircle-bottom.png" />
    <p class="m2head its-blinking">Loading...</p>
  </div>
</div>

在你的fileUploadCtrl()中你可以做一些类似set $scope的事情。Loading = true/false根据你在进程中的位置，然后在你的视图

<load-animate ... ng-show="loading"></load-animate>
相关文章：