Javascript 第二次加载页面时无法显示正在加载的微调器图像

我想在页面加载/等待从后端获取响应时显示加载微调器。 下面的代码加载pdf文件并显示在网页上。最初，当pdf仍在加载时，会看到加载图标。但这是第二次单击“重新生成”按钮重新生成pdf并加载pdf时，网页上会显示旧pdf，而我希望显示加载微调器图标，然后加载响应，而不是显示旧pdf，然后加载响应。 或者我甚至可以在重新加载数据按钮附近显示加载微调器图标，直到加载新响应

html代码：

    <table style="width:100%;height:80%;" ng-controller="loadingSampleCtrl">
<tr> <td><button type="button" ng-click="fileRead()">Reload data</button></td></tr>

         <tr ng-show="loading"> <td colspan="5" style="white-space: nowrap;text-align: center; font-size:36px;"><div class="loader"><i class="fa fa-spinner fa-spin" ></i> Loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></div></td></tr>
         <object-reloadable></object-reloadable>
         </table>

---

对于上面提到的js代码，我也面临同样的问题。单击“重新加载”按钮后，无法看到加载图标。

编辑：我在下面提到了在ng click上调用一个函数，您似乎错过了该函数

这应该起作用：

单击“重新加载数据”按钮时，调用如下函数：

将var html替换为$scope.html； 您两次声明html变量

function reloadData(){
  $scope.pdfName = {};
  $scope.html = '';
  $scope.loadData();
}

---

请根据您的代码更改变量的名称。

单击ng，您将直接调用fileread。而是调用loadData。那么它应该可以工作，原因是您正在将$scope.loading设置为true inside loadData

是否尝试在单击按钮时取消设置pdfname变量，将其设置为空对象？不，我没有厌倦它。我如何才能做到这一点，因为我正在运行时动态创建它。任何建议都会很有帮助。如果你能为你的代码创建一个提琴，帮助你会容易得多。请看我的html代码，我刚刚添加了按钮代码，重新加载数据。我调用的是我在生成pdf时第一次实际使用的fileRead按钮。我仍然可以使用你建议的解决方案吗？在你的控制器中，添加上述功能并将其映射到按钮，它应该可以工作。我刚刚注意到，在我的代码或你的代码中，当我单击“重新加载数据”按钮时，它会显示加载图标，但在它显示的下方某处，我需要向下滚动页面以查看它。我认为它是在pdf显示区域后显示加载图标。有什么建议吗？请清除html变量。包括var html=''；在函数中，重新加载数据。检查答案，我已经编辑了它来添加这个案例。仍然是同一个问题，请看我上面的帖子，我已经在我帖子的编辑部分给出了更新的js代码。仍然无法显示重新加载图标来代替html部分，相反，pdf显示部分变为空白，重新加载图标显示在空白处，我需要向下滚动以查看图标。

<style>
    @keyframes blink {50% { color: transparent }}
    .loader__dot { animation: 1s blink infinite }
    .loader__dot:nth-child(2) { animation-delay: 250ms }
    .loader__dot:nth-child(3) { animation-delay: 500ms }

</style>

app.directive('objectReloadable', function() {
          var link = function(scope, element, attrs) {
            var currentElement = element;

            scope.$watch('pdfName', function(newValue, oldValue) {
                 if (newValue !== oldValue) {
                     scope.loading = false;
                     scope.pdfName = newValue;
                     scope.html = '<object style="width: 100%; height: 1200px;overflow-y: hidden; cursor:pointer;" type="application/pdf" data="' + scope.pdfName.filePath + '" ></object>';
                     var replacementElement = angular.element(scope.html);
                    currentElement.replaceWith(replacementElement);
                    currentElement = replacementElement;
                }
            });
        };
        return {
            restrict: 'E',
            scope: false,
            link: link
        };
    })

    myApp.controller('loadingSampleCtrl', function ($scope, FilesService) {
          $scope.loadData = function () {
          $scope.loading = true;
$scope.html='';
            FilesService.fileRead().then(
                function (response) {
                     $scope.filePathAndName = response;
                       if(window.navigator.msSaveOrOpenBlob){
                        $scope.IEBrowser = true;
                        $timeout(function() {
                            $scope.pdfName = response;
                           }, 0);
                    } else {
                        $scope.IEBrowser = false;
                        $scope.filePathAndName = response;
                         $scope.loading = false;
                     }
                },
              function (errResponse) {
                    $rootScope.showError("Internal error" + errResponse);
                });

        }
       $scope.loadData();
    });

function reloadData(){
  $scope.pdfName = {};
  $scope.html = '';
  $scope.loadData();
}