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. Thanks in advance!

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
}

});

Solution

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

Comments

[profoundWanderer]

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]

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]

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

[Tyler Collier]

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

[chrismacp]

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.