0
ファイルのアップロード(ファイルリーダー)の進行状況を表示したい。ここで指示詞からangularjsを持つコントローラにデータを渡す方法は?
は私のhtmlです:
<md-progress-linear id="file-progress-indicator" md-mode="determinate" value="{{progress}}"></md-progress-linear>
、ここでは私のディレクティブです:
angular.module('image.directives').directive('edFileUploader', ['$parse', '$mdDialog', '$mdBottomSheet', '$timeout', 'toastr', function($parse, $mdDialog, $mdBottomSheet, $timeout, toastr) {
return {
restrict: 'A',
link: function($scope, el, attrs) {
var setter = $parse(attrs.edFileUploader)($scope);
$(el[0]).on('change', function(e) {
var reader = new FileReader();
if (setter) {
setter(event.target.result, el);
if (typeof attrs.edCloseAfter !== 'undefined') {
$mdBottomSheet.hide();
}
}
};
reader.onprogress = function(data) {
if (data.lengthComputable) {
var progress = parseInt(((data.loaded/data.total) * 100), 10);
// $scope.progress = progress;
}
}
if (e.target.files[0] != undefined) {
reader.readAsDataURL(e.target.files[0]);
$scope.loading = false;
el.next().removeClass('loading');
$scope.done = true;
} else {
$scope.loading = false;
el.next().removeClass('loading');
$scope.done = true;
}
});
}
}
}]);
予想通り、それはバーがうまくいく進行するようreader.onprogressから変数進捗を渡す方法は?ここでは、コントローラにdirecctiveからデータを送信するための方法を使用し(http://jsfiddle.net/L8masomq/)
:
はここhttp://jsfiddle.net/maxisam/QrCXh/ –