Angular Factory中$http请求进度无法实时更新Controller的问题

我来帮你搞定这个问题！这个场景在Angular 1.x里挺常见的，核心原因有两个：异步回调不在Angular的变更检测上下文里，以及Factory和Controller之间的数据传递方式不对。咱们一步步来解决：

问题根源解析 #

1. 变更检测未触发：上传进度的progress事件是浏览器原生的异步事件，它的回调执行时不在Angular的$digest循环中，所以Angular不知道你更新了进度值，自然不会更新视图。
2. 数据传递类型错误：如果你的Factory里直接返回一个基本类型（比如number）的进度值，Controller拿到的只是这个值的副本——Factory里更新进度时，Controller里的变量不会同步变化。必须用**引用类型（比如对象）**来共享状态，这样两边操作的是同一个内存对象。

具体解决方案 #

步骤1：改造Factory，用引用类型存储进度并触发变更检测 #

咱们在Factory里创建一个对象来保存进度状态，同时在进度回调里用$timeout触发Angular的变更检测（比直接用$apply更安全，避免循环报错）：

angular.module('yourApp').factory('UploadFactory', ['$timeout', function($timeout) {
  // 用对象存储进度，保证Controller和Factory共享同一引用
  const uploadState = {
    progress: 0
  };

  function initUpload(file) {
    // 这里以angular-file-upload的FileUploader为例，可根据你的实际上传工具调整
    const uploader = new FileUploader({
      url: '/your/upload/api',
      uploadEventHandlers: {
        progress: function(event, item, progress) {
          // 用$timeout包裹，自动触发$digest循环，让Angular感知到进度变化
          $timeout(() => {
            uploadState.progress = progress;
          });
        }
      }
    });

    uploader.addToQueue(file);
    uploader.uploadAll();
  }

  // 返回上传方法和状态对象
  return {
    startUpload: initUpload,
    uploadState: uploadState
  };
}]);

步骤2：在Controller中绑定共享状态对象 #

直接把Factory里的uploadState对象赋值给$scope，这样视图就能实时绑定到进度属性：

angular.module('yourApp').controller('UploadController', ['$scope', 'UploadFactory', function($scope, UploadFactory) {
  // 绑定Factory的状态对象，进度变化时视图自动更新
  $scope.uploadState = UploadFactory.uploadState;

  $scope.handleUpload = function(selectedFile) {
    UploadFactory.startUpload(selectedFile);
  };
}]);

步骤3：视图中绑定进度值 #

在HTML里直接绑定对象的属性即可：

<div class="upload-progress">
  当前上传进度: {{ uploadState.progress }}%
</div>
<input type="file" ng-model="selectedFile">
<button ng-click="handleUpload(selectedFile)">开始上传</button>

为什么这样能解决问题？ #

• 引用类型共享：uploadState是对象，Factory和Controller引用的是同一个内存地址，所以Factory里更新progress属性时，Controller里的uploadState也会同步变化。
• 变更检测触发：$timeout会把进度更新的逻辑放到Angular的$digest循环中执行，Angular会自动检测到属性变化并更新视图。如果不想用$timeout，也可以用$rootScope.$apply()，但要注意避免在已经进行$digest循环时调用（会抛出循环报错），所以$timeout是更稳妥的选择。

内容的提问来源于stack exchange，提问作者lilbiscuit