javascript - AngularJS - 如何及时刷新 Controller 属性

Question

以这个非常简单的应用程序为例。

查看

<div ng-controller="filesController as filesCtrl">
    <div ng-repeat="file in filesCtrl.files">
        <p>{{file.percent}}% completed of file ID : {{file.id}}</p>
    </div>
</div>

Controller

app.controller('filesController', function(){
   this.files = files; // the files variable loaded globally as cdata;
});

所以，这段代码显示了服务器中文件的当前进度。现在，我需要连接到每个文件的服务器以及时获取百分比(每 30 秒一次)。

我研究过并尝试创建一项服务。

服务

app.factory('fileProcessingStatus', ['$http', '$interval', function($http, $interval){
    var service = {};
    service.status = {};
    service.file_id = 0;
    service.isComplete = false;
    service.interval = {};

    service.getCurrentStatus = function(file_id){
        var url = app.ajaxUrl + '?action=file_processing_status&file_id=' + file_id;

        $http.get(url)

        .success(function(data){

                console.log(data);

            if(data == 0){
                service.status = 0;
            }else{
                service.status = data;
                // check data and set isComplete as true when file is finished processing
                if(service.data.status == 'processed'){
                    service.stopChecking();
                }
            }
        })
        .error(function(){
            service.status = 0;
        });

    };

    service.startChecking = function(file_id){
        service.file_id = file_id;
        service.interval = $interval(getCurrentStatus(file_id), 30 * 1000);
    };

    service.stopChecking = function(){
        $interval(service.interval);
    };

}]);

该服务打算每 30 秒向服务器发送一次查询但我不知道如何将文件 ID 传递给服务。如果我说 5 个文件服务应该为所有 5 个文件独立调用。

Answer 1

$http 不会公开 xhr，因此您无法注册 onprogress 事件。

看看这里 how to add Angular $http event listeners