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

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显式运行以触发 a $digest，这将更新视图：

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