Angular Material Fortschritt linearen Balken nicht mit Firebase aktualisieren

Question

Ich benutze Firebase, um Bilder und eckige Material zum Stylen meiner App hochladen, aber ich habe Probleme mit der Aktualisierung der Wert-Attribut auf der <md-progress-linear> Direktive.

Die Variable wird jedes Mal aktualisiert, wenn die next-Funktion ausgeführt wird. Dies ist alle paar Sekunden, bis der Upload abgeschlossen ist. Dies kann durch Protokollierung vm.imgProgress an der Konsole (die ich in der next Funktion mache) nachgewiesen werden. Der Wert für die Direktive wird jedoch nur aktualisiert, wenn ich mich auf ein Formularfeld konzentriere.

Hier ist etwas von meinem Code, ich hoffe es ist nützlich.

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

Hier ist meine Lösung Basis auf @camden_kid Antwort

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