我正在使用 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 行中,随着更新的进行,我没有更新“进度”范围变量。但我在第 1 行 CONSOLE.LOG 语句中看到了正确的输出。
为什么范围变量没有连接到 html?我通过“states.js”将此 Controller 正确连接到我的 html 页面
**states.js**
.state("admin", {
url: '',
template: "../../../views/admin/home.html",
controller: 'controller.admin.main'
})
我的 Controller 中有其他功能,比如“上传”,它可以从我的 html 中正确调用。这样可以确保 Controller 正确连接到 html 页面。但为什么 $scope.progress 变量值的更改没有反射(reflect)在我的 html 页面中。请有人帮忙。我被困了两天了。
谢谢。
最佳答案
当范围改变时调用$scope.$apply()
$scope.progress = Math.round((progress.loaded * 100.0) / progress.total);
if(!$scope.$$phase) {
$scope.$apply()
}
因为上传函数可能是在 angularjs 范围之外调用的。调用 $scope.$apply()
将导致摘要循环运行,因此 View 会发生变化
关于javascript - Amazon S3 上传图像 - 跟踪上传进度 - Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26099577/