AngularJS Directive Passing String

Question

This directive is trying to create an HTML element called progress bar that tracks progress as you move page to page. I'm trying to develop it to be used as : <progress-bar progress='1' max='6' error="true"></progress-bar>

I'm simply trying to pass the information from the ^^element in html to my directive and process the information to change the progress bar appropriately.

This is working for "progress" and "max" which take integer values, but for some reason the commented out code, which would process "error" (which is a string) is causing problems. I'm new to angularJS so I'm sorry if any of this sounds confusing or unclear... please ask if I need to elaborate/clarify.

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
}

});

history.back() adds back functionality to the progress bar--when you click the progress bar, it acts like clicking the back button on the browser. This is working fine the way it is. Also, you are correct that error should be a boolean. However, I still wouldn't understand how to pass a boolean from html to directive :/ Again, much thanks — profoundWanderer
– profoundWanderer, Commented Jan 8, 2014 at 16:42

chachan · Accepted Answer · 2018-10-12 18:14:44Z

112

In your directive, you're using the bi-directional binding of attributes from the global scope to the directive local scope.

In this mode, the attribute value in the html is evaluated as an expression and thus your directive tries to bind its local scope.error to the result of evaluating true as an expression.

When you test scope.error == "true", you're actually testing true == "true" and this evaluates to false in javascript.

To fix your problem, you can:

either use a quoted string when calling your directive:

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

or change your binding mode in your directive since you don't need the bi-directional binding. @ variables are always of type string.

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

You can find more information on the binding modes in Angular $compile documentation

edited Oct 12, 2018 at 18:14

chachan

2,4721 gold badge28 silver badges43 bronze badges

answered Jan 8, 2014 at 17:49

rluta

6,9772 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

profoundWanderer Over a year ago

This is immensely helpful; thanks so much. However, the problem is not yet the comparison test evaluating incorrectly.... for some reason my site crashes when I uncomment error: '=error'. For some reason this line is causing a problem and changing it to error: '@error' did not resolve the problem. It is good to know that my current code would be testing true == "true" had I gotten to that stage so, again, thanks for the tip above

rluta Over a year ago

I assume you're adding a comma after progress when uncommenting error to avoid the trivial syntax error. What is your console error when uncommenting the line ?

profoundWanderer Over a year ago

wow.. ROOKIE MISTAKE!! Thanks rluta, for foreseeing my real problem and identifying my current/stupid one. Solved. Much appreciated.

Tyler Collier Over a year ago

Thanks. This stuff should be mentioned in the doc at docs.angularjs.org/guide/directive.

chrismacp Over a year ago

Finally solved my issue thanks to your comment. I was trying to pass '+1' as a directive attribute value and it was being converted to the number 1. Switching the binding mode as I don't need bi-directional was a good solution. Many thanks.

Collectives™ on Stack Overflow

AngularJS Directive Passing String

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related