Question

我想在页面中显示流程状态。在开始过程之前，我将$ scope的值设置为true。因此必须在页面中显示加载，但在进程的时间页面已锁定且未显示加载。

angular.module('testApp').controller('testCtrl', function($scope){
     $scope.impFile=function(){
         $scope.processStatus= false;
         reader.readAsText(target.files[0]);

         reader.onload = function (e) {
             // start process, that take about 10 seconds
         }
         reader.onloadend = function () {
            $scope.processStatus= false;
         }
     }
});

HTML：

<i class="fa fa-spinner fa-spin" ng-show="processStatus"></i>
<span ng-hide="processStatus">uploaded</span>

Answer 1

我假设您正在使用FileReader（您可以在此处查看文档：{{3}}）

因此，当您的读者开始阅读文件时，您可以将$ scope.processStatus设置为true：

reader.onloadstart = function() {
    $scope.processStatus = true;
}

然后，当您的读者完成阅读文件后，您可以使用您已有的阅读器功能.onloadend。

如果查看文档，reader.onload仅在读取操作完成后才会发生。

请注意，reader.onloadend和reader.onload之间的区别在于reader.onloadend会触发成功或失败，而reader.onload只会在成功时触发

Answer 2

我找到了解决方案。我在 reader.onloadend 功能中添加$ scope。$ apply。

angular.module('testApp').controller('testCtrl', function($scope){
     $scope.impFile=function(){
         $scope.processStatus= false;
         reader.readAsText(target.files[0]);

         reader.onload = function (e) {
             // start process, that take about 10 seconds
         }
         reader.onloadend = function () {
            $scope.processStatus= false;
         }
         //This is solution
         reader.onloadend = function (e) {
            $scope.csvFile.uploadStatus = false;
            $scope.$apply();
         }
     }
});

Angular.js - 不要在进程中同步$ scope的值

2 个答案: