Question

我有一个将文件上传到浏览器的指令

angular.module('angularPrototypeApp')
.directive('upload', ['$parse', function ($parse) {
return {
    restrict: 'A',
    scope: false,
    link: function(scope, ele, attrs) {

        var fn = $parse(attrs.upload);
        ele.on('change', function(onChangeEvent){
            var reader = new FileReader();

            reader.onload = function(onLoadEvent) {
                scope.$apply(function(){
                    fn(scope, {$fileContents: onLoadEvent.target.result} );
                });
            }

            reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
        })

    }
  };
}]);

代码来自这里： https://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/

视图如下所示：

<progressbar class="progress-striped active" value="dynamic" </progressbar>
<input type="file" upload="parseInputFile($fileContents)">

在控制器中，我执行以下操作：

angular.module('angularPrototypeApp')
.controller('Gc2xlsxCtrl', ['$scope', 'blockUI', function ($scope,  $timeout, blockUI) {

$scope.dynamic = 0;

$scope.parseInputFile = function($fileContents){
    $scope.$broadcast('fileUploaded', $fileContents);
}

$scope.$on('fileUploaded', function(event, fileContents) {
    if(fileContents !== undefined){
        blockUI.start();

        //a lot of work is done herem takes between 2 and 20 Seconds
        for(var i = 1; i <= 100; i++){
            $scope.dynamic += 1;
        }

        blockUI.stop();
    }
});
}]);

我的问题是只有在整个方法完成后才会在视图中显示$ scope.dynamic的更新。 blockUI也是如此。日志表示它在方法的开头被调用，但视图从不升级。对此有任何帮助都很棒！

Answer 1

这部分：

//a lot of work is done here, takes between 2 and 20 Seconds
for(var i = 1; i <= 100; i++){
    $scope.dynamic += 1;
}

是同步代码，在完成之前不会更新视图。基本上，循环将$scope.dynamic从1更新为100，但视图在完成之前不能更改;所以你只看1，然后是100。

您需要异步完成工作，以便在工作进行时更新视图。

如何最好地做到这一点是另一个问题。你可以use $q in AngularJS来做。

angular不更新控制器中的$ scope变量

1 个答案: