AngularJS - 如何及时刷新控制器属性

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>

控制器

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事件。

看看这里如何添加 Angular $http事件侦听器

Answer 2

为了为每个文件创建检查，我们需要为每个文件创建单独的$scope。因此，修改后的代码将如下所示。

视图更改

需要新的控制器为每个file变量创建不同的作用域，并通过ng-init传递file。目前我不知道使用ng-init是否是最佳实践。如果您认为有更好的解决方案，请随时启发我。

<div ng-controller="filesController as filesCtrl">
    <div ng-repeat="file in filesCtrl.files">
        <!-- Notice the new controller -->
        <p ng-controller="ProgressUpdate as progressUpdate" ng-init="init(file)">{{file.percent}}% completed of file ID : {{file.id}}</p>
    </div>
</div>

引入新控制器（删除服务）

// we still need the older one
app.controller('filesController', function(){
   this.files = files; // the files variable loaded globally as cdata;
});
// new controller
 app.controller('ProgressUpdate', ['$http', '$interval', '$scope', function($http, $interval, $scope){
        $scope.status = {};
        $scope.file_id = 0;
        $scope.isComplete = false;
        $scope.interval = {};
        $scope.init = function(file){
            $scope.startChecking(file.id);
            $scope.file = file;
        };
        $scope.startChecking = function(file_id){
            $scope.interval = $interval(function(){
                    $scope.getCurrentStatus(file_id)
                }
                , 30 * 1000);
        };
        $scope.stopChecking = function(){
            $scope.isComplete = true;
            $interval.cancel($scope.interval);
        };
        $scope.getCurrentStatus = function(file_id){
            var url = app.ajaxUrl + '?action=get_file_info&id=' + file_id;
            $http.get(url)
                .success(function(data){
                    var file = $scope.file;
                    if(data == 0){
                        // handle error
                    }else{
                        if(file.status != 'lock'){
                            var processed = data.listing_processed;
                            var percent = (processed/file.total ) * 100;
                            file.percent = percent.toFixed(2);
                        }
                        // check data and set isComplete as true when file is finished processing
                        if(data.status == 'processed'){
                            $scope.stopChecking();
                        }
                    }
                })
                .error(function(){
                    // handle error
                });
        };
    }]);

一旦我们在ProgressUpdate控制器中获取file，我们现在可以创建http请求并从服务器获取数据。成功获取数据后，我们更新file变量。Angulars 的双向数据绑定负责视图自动更新的其余部分。