javascript - 异步 XMLHttpRequest 响应后，ng-grid 未与最新数据绑定(bind)

Question

我有一个 AngularJS 网络应用程序，我正在尝试将文件上传到服务器，当上传完成时，我必须使用上次上传文件的条目更新 ng-grid。以下是我的网格html，

<div class="gridholder" data-ng-grid="viewmodel.gridOptions">                
            </div>

以下是我的 Controller 逻辑。

vm.gridOptions = {
            data: 'gridData',            
            enableColumnResize: true,            
            enablePaging: true,
            columnDefs: [
                { field: 'FileName', displayName: 'File Name', width: 250 }
                { field: 'UploadedDate', displayName: 'Uploaded Date'}
            ],
            multiSelect: false,
            enableSorting: true,
            showFooter: true,
        };

要求是我显示文件上传的进度和整个应用程序在上传过程中做出响应，我已经实现了这一点，但我的 ng-grid 在特定情况下没有更新。

如果我一直停留在同一个页面，直到文件上传并收到响应，网格正在刷新，但是当我移动到我的应用程序的另一个页面并返回到文件上传页面，然后响应出现时，我的网格没有得到刷新。

这是我的文件上传js代码，

var data = new FormData();
data.append('file', file);
var xhrRequest = Factory.uploadFileRequest('UploadFile');
xhrRequest.upload.addEventListener("progress", progressHandler, false);                

xhrRequest.onreadystatechange = function (e) {
};

xhrRequest.onload = function (e) {
    if (JSON.parse(e.currentTarget.responseText).Success == true) {
        $timeout(function () {
            $scope.LoadGrid();
            //showing success message here
        }, 2000);
    }
    else
    {
        //showing error message here                    
    }

};
xhrRequest.onerror = function (e) {                    
   //showing error message here                 
};
xhrRequest.send(data);

$scope.LoadGrid = function () {            
    Factory.callGet("Files").then(function (d) {

            $scope.gridData = d.data;
        }               
        $scope.totalItems = $scope.gridData.length;
    }, function error(err) {
        //Error Message
    });
}

gridData 是我的 data-ng-grid 值。我已经在 $timeout 中调用了我的 LoadGrid 方法，但网格仍然没有刷新最新数据。任何帮助将不胜感激。

Answer 1

可能的问题

您在 Controller 中实现了上传逻辑。当您切换到另一个 View 时，angularjs 会破坏您的 Controller ，因此没有人会监听文件上传响应。

可能的解决方案:

1) 使用service(或Factory)类型的单例来管理那里的上传过程。
例如 MyService.upload(data).then(function (response) {/**/});

2) 默认情况下，MyService.upload(data) 会定期返回一个 promise ，但也会将结果存储在服务中，例如，upload_results:

app.service('MyService',['$q',function ($q) {

    var self = this;

    var upload_results = [];

    self.upload = function (_data) {
        return // <YOUR_PROMISE> 
          .then(function (response) {

              upload_results.push({
                    id: new Date().getTime(), 
                    data: response.data
               })              
            }
            , function (error) {
              console.error(error);
              return $q.reject(error);
            });
      };

    self.getResults() = function(){
      return upload_results;
    }

    self.resetResults() = function(){
      upload_results = [];
    }
}

当您在启动时初始化 Controller 或返回到之前的 Controller 时，您会询问服务是否有适合您的东西:

   var results = MyService.getResults();

   if(results.length > 0){
    $scope.gridData = results[0].data; // or use timestamp to manage it
    MyService.resetResults();
   }

---

希望它能给你一些启发，