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

我使用角度js将图片上传到Amazon S3。Amazon S3上传图片 - 跟踪上传进度 - Angular JS

我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号线，我不明白了“进度'范围变量更新，随着更新的进行。但是我在第1行CONSOLE.LOG语句中看到了正确的输出。

为什么范围变量没有连接到html？我通过正确连接该控制器到我的html页面我的“states.js”

**states.js** 

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

我有我的控制器等功能说“上传”，这是获得正确地从我的HTML调用。所以这确保控制器正确连接到html页面。但为什么$ scope.progress变量的值更改没有反映在我的html页面中。有人请帮忙。我被困了两天。

谢谢。

来源

2014-09-29 sabari

呼叫$scope.$apply()当范围发生变化

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

，因为它可能是上传功能被称为angularjs范围之外。调用$scope.$apply()将导致摘要循环运行，因此视图更改

来源

2014-09-29 12:20:16 Prasad

谢谢。 – sabari 2014-09-29 14:09:53

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

回答

相关问题