Amazon S3上传图像-跟踪上传进度-Angular JS

Question

我正在使用angular js将图像上传到Amazon S3。

我的Controller.js- [controller.admin.main]

 var req = bucket.putObject(params).on('httpUploadProgress', function(progress) {
                            $scope.progress = Math.round((progress.loaded * 100.0) / progress.total);
                        /* LINE 1 */ console.log($scope.progress);
                        }).send(function(err, data) {
                            console.log("FINISHED");
                            if (err) {
                                console.log(err.message);
                                return false;
                            } else {
                                console.log('File Uploaded Successfully');
                            }
                        });

我的html页面

  <div ng-show="progressVisible">
                       <!--Line 2--> <div class="percent">{{progress}}%</div>
                        <div class="progress-bar">
                          <!-- Line 3 -->  <div class="uploaded" ng-style="{width: {{progress}}%}"></div>
                        </div>
                    </div>

在第2行和第3行中，随着更新的进行，我没有更新'progress'范围变量。 但是我在第1行的CONSOLE.LOG语句中看到了正确的输出。

为什么范围变量未连接到html？ 我正在通过'states.js'将该控制器正确连接到我的html页面

**states.js**

.state("admin", {
                url: '',
                template: "../../../views/admin/home.html",
                controller: 'controller.admin.main'                
            })

我的控制器中还有其他功能，例如从我的html正确调用的“上传”功能。 因此，这可确保控制器正确连接到html页面。 但是为什么$ scope.progress变量-value的更改未反映在我的html页面中。 有人请帮忙。 我被困了两天。

谢谢。

Answer 1

范围更改时调用$scope.$apply()

    $scope.progress = Math.round((progress.loaded * 100.0) / progress.total);
    if(!$scope.$$phase) {
      $scope.$apply()
    }

因为可能在angularjs范围之外调用了上载函数。 调用$scope.$apply()将导致摘要循环运行，因此视图将更改