如何通过文件上传将进度条集成到angularjs指令中

Question

我需要为文件上传创建一个进度条.我知道我的进度事件监听器正在工作.是否有更多"有角度的方式"来做这件事？如何从事件监听器内部更新进度条？

作为序言,如果它也需要帮助,请随意纠正和批评一般逻辑流程.

我有这个画布......

<canvas id="progress"></canvas>

我有一个上传文件的angularjs指令.我添加了一个进度事件监听器(仅显示相关部分)...

link: function postLink(scope, element, attrs, ctrl) {
    var fileUpload = function (img, file) {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                var percentage = Math.round((e.loaded * 100) / e.total);
                // UPDATE THE PROGRESS BAR HERE
            }
        }, false);
    }
    element.bind('change', function (evt) {
         var files = evt.target.files;
         var canvas = document.getElementById("progress"),
         context = canvas.getContext("2d");
         context.fillStyle = 'lighgray';
         context.fillRect(0, 0, 200, 18);
         context.moveTo(0, 0);
         context.fillStyle = 'darkgray';
         context.fillRect(0, 0, 1, 18);
         for(var i = 0; i < files.length; i++) {
             fileUpload(files, files[i]);
        }
    }
}

Answer 1

看一下Angular UI Bootstrap:http://angular-ui.github.io/bootstrap/

它为Bootstrap UI元素提供了指令,包括进度条.

看起来您只需要将上传进度值与条形图绑定,它就会自动更新.

(一定要喜欢双向数据绑定.)