Я использую firebase для загрузки изображений и углового материала в свое приложение, но у меня возникают проблемы с обновлением атрибута value в директиве <md-progress-linear>
.Угловой ход материала линейный батон, не обновляющийся с помощью firebase
Эта переменная обновляется каждый раз, когда запускается функция next
, которая проходит каждые несколько секунд, пока загрузка не завершится. Это можно проверить, зарегистрировав vm.imgProgress
на консоли (что я делаю в функции next
). Однако значение в директиве не обновляется, если не сосредоточиться на поле формы.
Вот некоторые из моих кодов, я надеюсь, что это полезно.
HTML
<md-progress-linear md-mode="determinate" value="{{vm.imgProgress}}"></md-progress-linear>
JS
angular
.module('app.posts')
.controller('PostsController', PostsController);
PostsController.$inject = ['$firebaseArray', '$window'];
function PostsController($firebaseArray, $window) {
var vm = this;
vm.imgProgress = 0;
function uploadImage() {
var file = document.getElementById('file-input').files[0];
var uploadTask = storageRef.child('images/' + file.name).put(file);
function next(snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
vm.imgProgress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100;
console.log('Upload is ' + vm.imgProgress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}
function complete() {
vm.newPost.imgURL = uploadTask.snapshot.downloadURL;
}
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, next, error, complete);
}
}
Попробуйте ввести '$ scope' и' $ timeout', а затем заверните присваивание ** vm.imgProgress ** в ** next() ** с '$ timeout':' $ timeout (function(). .. {}); –