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

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;（或相应地假设），但结果与预期不符。

- EDIT-- 以下是更新的js代码：单击重新加载按钮，它调用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上调用一个你似乎错过的函数。

这应该有效：

单击function reloadData(){ $scope.pdfName = {}; $scope.html = ''; $scope.loadData(); }时，调用类似函数：

用$ scope.html替换var html; 你要两次声明html变量;

-(void)application:(UIApplication *)application handleActionWithIdentifier:(NSString *)identifier forLocalNotification:(UILocalNotification *)notification withResponseInfo:(NSDictionary *)responseInfo completionHandler:(void (^)())completionHandler

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

Answer 2

在ng-click上你直接调用fileread。而是调用loadData。它应该工作（原因是你在loadData内设置$ scope.loading为true）

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

2 个答案: