Линейная полоса прогресса углового материала не обновляется с помощью firebase

Я использую firebase для загрузки изображений и материала angular для стилизации моего приложения, но у меня возникают проблемы с обновлением атрибута value в директиве <md-progress-linear>.

Переменная обновляется каждый раз, когда запускается функция 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);

  }

}

firebase firebase-storage angularjs angular-material
person pinzonjulian    schedule 11.07.2016    source источник
comment
Попробуйте внедрить $scope и $timeout, а затем оберните назначение vm.imgProgress в next() с помощью $timeout: `$timeout(function () ...{});   -  person camden_kid    schedule 12.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот мое решение, основанное на ответе @camden_kid

HTML:

<md-progress-circular md-mode="determinate" value="{{percent}}"></md-progress-circular>

JS:

        $scope.uploadfile = function (ev) {

            var file = $scope.mp3;

            var metadata = { contentType: 'audio/mpeg', };
            var uploadTask = storage.ref().child('songs/' + file.name).put(file, metadata);

            uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
                    function (snapshot) {

                        $timeout(function () {
                            $scope.percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                        });
                        console.log('Upload is ' + $scope.percent + '% done');
                        switch (snapshot.state) {
                            case firebase.storage.TaskState.PAUSED:
                                //console.log('Upload is paused');
                                break;
                            case firebase.storage.TaskState.RUNNING:
                                //console.log('Upload is running');
                                break;
                        }
                    });
        };
person PhongVHD    schedule 19.08.2016