加载文件时显示加载指令

Question

当我将大于 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();
}

加载动画-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>

Answer 1

在您的 fileUploadCtrl() 中，您可以根据您在流程中的位置执行类似 set $scope.loading = true/false 的操作，然后在您看来执行

<load-animate ... ng-show="loading"></load-animate>

加载文件时显示加载指令

Display a loading directive while loading a file

html

javascript

directive

angularjs