角度材料进度线性条不随 Firebase 更新答案

【问题标题】：Angular material progress linear bar not updating with firebase角度材料进度线性条不随 Firebase 更新
【发布时间】：2016-07-11 23:29:17
【问题描述】：

我正在使用 firebase 上传图像和角度材料来为我的应用设置样式，但我在更新 <md-progress-linear> 指令上的 value 属性时遇到问题。

每次next 函数运行时，该变量都会更新，即每隔几秒，直到上传完成。这可以通过将vm.imgProgress 记录到控制台来证明（我在next 函数中这样做）。但是，除非我关注表单字段，否则指令上的值不会更新。

这是我的一些代码，我希望它有用。

HTML

<md-progress-linear md-mode="determinate" value="{{vm.imgProgress}}"></md-progress-linear>

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

  }

}

【问题讨论】：

尝试注入$scope和$timeout，然后用$timeout将分配给next()中的vm.imgProgress包装起来：`$超时（函数（）...{}）；

标签： angularjs firebase angular-material firebase-storage

【解决方案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;
                        }
                    });
        };

【讨论】：