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

Question

我想在页面加载/等待从后端获取响应时显示加载微调器。下面的代码加载 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代码:

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;(或相应的 false)，但结果不符合预期。

--编辑--下面是更新后的js代码:OnClick Reload按钮时，会调用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 上调用一个函数，您似乎错过了。

这应该有效:

当单击重新加载数据按钮时，调用如下函数:

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

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

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