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页面中。有人请帮忙。我被困了两天。
谢谢。
答
呼叫$scope.$apply()
当范围发生变化
$scope.progress = Math.round((progress.loaded * 100.0)/progress.total);
if(!$scope.$$phase) {
$scope.$apply()
}
,因为它可能是上传功能被称为angularjs范围之外。调用$scope.$apply()
将导致摘要循环运行,因此视图更改
谢谢。 – sabari 2014-09-29 14:09:53