2016-07-11 2 views
0

Я использую 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); 

    } 

} 
+0

Попробуйте ввести '$ scope' и' $ timeout', а затем заверните присваивание ** vm.imgProgress ** в ** next() ** с '$ timeout':' $ timeout (function(). .. {}); –

ответ

0

Вот мое решение базы на @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; 
         } 
        }); 
     }; 
Смежные вопросы