问题描述:

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

}

}

网友答案:

Here is my solution base on @camden_kid answer

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;
                        }
                    });
        };
相关阅读:
Top