web-dev-qa-db-fra.com

AngularJS Directive Passing String

Cette directive essaie de créer un élément HTML appelé barre de progression qui suit la progression lorsque vous déplacez de page en page. J'essaie de le développer pour qu'il soit utilisé comme: <progress-bar progress='1' max='6' error="true"></progress-bar>

J'essaie simplement de transmettre les informations de l'élément ^^ au format HTML à ma directive et de traiter ces informations pour modifier la barre de progression de manière appropriée.

Cela fonctionne pour "progress" et "max" qui prennent des valeurs entières, mais pour une raison quelconque, le code mis en commentaire, qui traiterait "erreur" (qui est une chaîne) pose problème. AngularJS, je suis nouveau, alors je suis désolé si cela vous semble confus ou peu clair ... merci de me demander si j’ai besoin de préciser/préciser. Merci d'avance!

app.directive('progressBar', function(){

var compileProgressBar = function(scope, elem, attrs) {
    var append = '<nav class="navbar navbar-fixed-bottom navbar-footer" role="navigation">\
                    <div class="container">\
                        <div class="row">';
    var i = 1;
    while (i <= parseInt(scope.max)) {
        if (i <= parseInt(scope.progress)) {
            //if (scope.error == "true"){
                //...
            //}
            //else {
            append += '<div class="col-xs-1"><div class="circle-filled"><center>'+i+'</center></div></div>'
            //}
        } else {
            append += '<div class="col-xs-1"><div class="circle-hallow"><center>'+i+'</center></div></div>'
        }
        i++;
    }
    append += '</div></div></nav>'
    elem.append(append);
    elem.bind('click', function(){
        if (scope.progress > 1) {
            history.back();
            scope.$apply();
        }
    });
}

return {
    restrict: 'AE',
    scope: {
        max: '=max',
        progress: '=progress'
        //error: '=error'
    },
    link: compileProgressBar
}

});

javascriptstringangularjsangularjs-directiveparameter-passing
62
profoundWanderer

Dans votre directive, vous utilisez la liaison bidirectionnelle des attributs de la portée globale à la portée locale de la directive.

Dans ce mode, la valeur d'attribut dans le code HTML est évaluée en tant qu'expression et votre directive essaie donc de lier son identificateur local scope.error au résultat de l'évaluation true = comme une expression.

Lorsque vous testez scope.error == "true", vous êtes en train de tester true == "true" et cela donne faux en javascript.

Pour résoudre votre problème, vous pouvez:

  • soit utiliser une chaîne entre guillemets lors de l'appel de votre directive:

    <progress-bar progress='1' max='6' error="'true'"></progress-bar>

  • ou changez votre mode de liaison dans votre directive puisque vous n'avez pas besoin de la liaison bidirectionnelle. Les variables @ sont toujours de type chaîne.

    return {
    restrict: 'AE',
    scope: {
       max: '@max',
       progress: '@progress',
       error: '@error'
    },
    link: compileProgressBar
}

Vous pouvez trouver plus d’informations sur les modes de reliure dans documentation angulaire $ compile

105
rluta