Faire un spinner avec Angular

intelligid
Javascript

Bonjour,

Voila je suis en train de découvrir AngularJs et je voudrais créer un element qui m'affiche un spin de Spin.js

Ce que je fais

J'ai créé une directive Element comme ceci:

app.directive("spinner",function(){
    return {
        restrict: "E",
        scope: {},
        link: function(scope, element, attrs){

            var spinner = new Spinner;

            scope.$watch(attrs.spinOn, function(value) {
                if(value == true){
                    spinner.spin(element);
                }else{
                    spinner.stop();
                }
            });

            scope.$watch(attrs.options, function (options) {
                spinner.stop();

                spinner = new Spinner(options);
                spinner.spin(element);
            }, true);

            element.on('$destroy', function() {
                spinner.stop();
            });
        }
    }
});

Et dans mon HTML

 <spinner spin-on="messageUpload"></spinner>

Ce que je veux

Je voudrais qu'un spinner de Spin.JS s'affiche dans mon element spinner

Ce que j'obtiens

Absolument rien. Quand je tente à true, le spin se lance mais ne s'affiche pas.

Et quand je tente avec une variable(messageUpload par exemple), rien ne se passe.

Merci

2 réponses

Maenhyr
Réponse acceptée

Bonjour,

app.directive("spinner",function(){
    return {
        restrict: "E",

        // on isole le scope (cad, que le scope de la directive est different de celui du controller)
        scope: {
          // on definit la variable spinOn comme etant une variable de type two-way binding
          // nous allons donc interpreter la valeur de spinOn. (avec attrs.spinOn, on recupere le string de la valeur et non la valeur)
          spinOn : '=' 
        },
        link: function(scope, element, attrs){

            var spinner = new Spinner();

            scope.$watch('spinOn', function(value) {
                if(value === true){
                   // on veut le DOM de l'element mais Angular utilise soit jQuery, soit jQlite qui possede la meme API
                   // nous devons donc recupere le DOM element pour le spinner
                   spinner.spin(element[0]);
                }else{
                    spinner.stop();
                }
            });

            scope.$watch(attrs.options, function (options) {
                spinner.stop();

                spinner = new Spinner(options);
                spinner.spin(element[0]);
            }, true);

            element.on('$destroy', function() {
                spinner.stop();
            });
        }
    }
});
Grafikart

Tu as mis des console.log voir si tu rentrais bien dans tes $watch ? La console ne donne rien ?