Comment intégrer une barre de progression dans angularjs directive avec upload de fichier

J'ai besoin de créer une barre de progression de téléchargement de fichiers. Je sais que mes progrès écouteur d'événement est de travail. Est il y a plus de "angulaire façon" de faire cela? Comment puis-je mettre à jour la barre de progression de l'intérieur de mon écouteur d'événement?

Comme une préface, n'hésitez pas à corriger et une critique de la logique générale de flux, s'il a besoin d'aide.

J'ai cette toile...

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

J'ai un angularjs directive de téléchargement de fichiers. J'ai ajouté un progrès de l'écouteur d'événement (affiche uniquement les parties pertinentes)...

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

OriginalL'auteur drew schmaltz | 2013-07-25

  1. 6

    Regarder Angulaire UI Bootstrap: http://angular-ui.github.io/bootstrap/

    Il fournit des directives pour Bootstrap éléments de l'INTERFACE utilisateur, y compris la barre de progression.

    On dirait vous avez juste à lier la progression du téléchargement de la valeur avec le bar, et il sera automatiquement mise à jour.

    (Gotta love les deux sens de la liaison de données.)

    Alors, quel serait le code ressemble en supposant que j'avais compris pertinentes javascript à partir de l'UI Bootstrap? <les progrès accomplis pour cent="1"></progress> est le html...
    Au lieu de var percentage utilisation scope.percentage et lier avec percent={{percentage}}.

    OriginalL'auteur Will M

  2. 0

    prendre un coup d'oeil à HTML5 progrès de la balise, votre code ressemblera à

        if (e.lengthComputable) {
        var percentage = Math.round((e.loaded * 100) / e.total);
        $('progress').val(percentage);
    }

    Je sais qu'il a beaucoup de problèmes avec la compatibilité et elle est différente dans les différents navigateurs (bien que vous pouvez fixer à l'aide de css3: bel exemple)

    dans votre cas, vous devez remplir un rectangle, encore et encore

    if (e.lengthComputable) {
    var percentage = e.loaded / e.total;
    context.fillRect(0, 0, progressWidth*percentage, 18);
}

    - Je me débarrasser de *100% parce que vous feriez mieux d'utiliser var progressWidth = 200 lorsque vous créez contexte

    look cet exemple, il montre mieux ce que je veux dire (et désolé pour mon anglais)

    Checkout mon montage à la question. Mon code pour dessiner la progressbar est en fait à l'intérieur de la onchange gestionnaire de décisions var contexte pas disponible à l'intérieur de ma fonction de chargement. Comment feriez-vous pour vous-il disponible?
    vient de mettre context supérieur à fileUpload fonction

    OriginalL'auteur vladkras