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

Question

我想在页面加载/等待从后端获取响应时显示加载微调器。 下面的代码加载 pdf 文件并显示在网页上。最初，当 pdf 仍在加载时，会看到加载图标。但是第二次单击“重新生成”按钮以重新生成 pdf 并再次加载 pdf 时，旧的 PDF 出现在网页上，而不是我想显示加载微调器图标然后加载响应（而不是显示旧的 pdf 然后加载回复）。 或者我什至可以在 Reload data button 附近显示加载微调器图标，直到加载新的响应。

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代码：

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;
                 var html = '<object style="width: 100%; height: 1200px;overflow-y: hidden; cursor:pointer;" type="application/pdf" data="' + scope.pdfName.filePath + '" ></object>';
                 var replacementElement = angular.element(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;
        FilesService.fileRead().then(
            function (response) {
                 $scope.filePathAndName = response;
                   if(window.navigator.msSaveOrOpenBlob){
                    $scope.IEBrowser = true;
                    $timeout(function() {
                        $scope.pdfName = response;
                        var html = '<object type="application/pdf" data="' + newValue + '"></object>';
                         var replacementElement = angular.element(html);
                         currentElement.replaceWith(replacementElement);
                         currentElement = replacementElement;*/
                    }, 0);
                } else {
                    $scope.IEBrowser = false;
                    $scope.filePathAndName = response;
                     $scope.loading = false;
                 }
            },
          function (errResponse) {
                $rootScope.showError("Internal error" + errResponse);
            });

    }
   $scope.loadData();
});

加载微调器的css：

<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>

我尝试过使用$scope.loading = true;（或相应地为假），但结果不如预期。

--编辑-- 下面是更新的js代码： Reload按钮的OnClick，调用loadingSampleCtrl，$scope.loadData = function ()

更新js代码：

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();
    });

使用上面提到的 js 代码，我也面临同样的问题。点击重新加载按钮，看不到加载图标。

Answer 1

编辑：我在下面提到过在 ng-click 上调用一个您似乎错过的函数。

这应该可行：

当Reload data button被点击时，调用如下函数：

用 $scope.html 替换 var html; 您正在声明 html 变量两次；

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

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

Answer 2

在 ng-click 上，您直接调用 fileread。而是调用 loadData。那么它应该可以工作（原因是您在 loadData 中将 $scope.loading 设置为 true）