Question

I'm using firebase to upload images and angular material to style my app but I'm having issues updating the value attribute on the <md-progress-linear> directive.

The variable does update every time the next function runs, which is every few seconds until the upload finishes. This can be proven by logging vm.imgProgress to the console (which I'm doing in the next function). However the value on the directive doesn't update unless I focus on a form field.

Here's some of my code, I hope it's useful.

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);

  }

}

Answer 1

这是我的解决方案，基于@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;
                        }
                    });
        };

Angular material progress linear bar not updating with firebase

1 个答案: