Question

我做了一个XHR上传Angular服务，我试图通过$ rootscope广播上传进度

...  
xhr.upload.onprogress=function (evt){
      if (evt.lengthComputable) {
        percentComplete = Math.round((evt.loaded / evt.total)*100); 
        console.log(percentComplete)
        $rootScope.$broadcast('upload:progress', percentComplete);
      }else{
        $rootScope.$broadcast('upload:progress', 'not computable');
      }
    }
...

，指令是

...
$scope.$on('upload:progress', function (event,data) {
  console.log('progress ' + data)
  $scope.progress = data
})
...

html文件是：

<div ng-controller="uploadController">    
    <input class="selectFile" type="file" multiple ng-model="files" file-change></input>
    <br><br>
    Selected: {{ files.length }}
    {{files}}
    <br><br>
    <a href="" ng-click="upload()">Start Upload</a>
    -- {{progress}}
</div>

控制台正确写入两个日志（xhr.upload.onprogress中的日志和$ scope。$ on中的另一个日志），但$ scope.progress不会更改....

出了什么问题？

谢谢！

Answer 1

由于它是在AngularJS生命周期之外的异步调用，因此您需要显式运行$scope.$apply以触发$digest，这将更新视图：

$scope.$apply(function () {
    $scope.progress = data;
});

指令中的Angular JS $ scope。$ on不会影响范围变量

1 个答案: