Directive Angular Directive

Question

This directive attempts to create an HTML element called a progress indicator, which tracks the progress as a page moves to a page. I am trying to develop it for use as: <progress-bar progress='1' max='6' error="true"></progress-bar>

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

This works for “progress” and “max”, which take integer values, but for some reason, commented out code that would handle the “error” (which is a string) causes problems. I'm new to angularJS, so I'm sorry if any of this sounds confusing or incomprehensible ... ask if I need to clarify / 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 } 

});

Answer 1

In your directive, you use bi-directional binding of attributes from the global scope to the local localization of the directive.

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

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

To fix the problem, you can:

• or use the quoted string when invoking your directive:

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

• or change the binding mode in your directive, since you do not need bidirectional binding. @ variables always have a type string.

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

For more information on binding modes, see the Angular compile documentation.