加载文件

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（）中你可以根据你在这个过程中的位置设置$ scope.loading = true / false，然后在你的视图中执行

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