AngularJS Directive Passing String

Question

Эта директива пытается создать элемент HTML, называемый индикатором выполнения, который отслеживает прогресс при перемещении страницы на страницу. Я пытаюсь разработать его для использования как: <progress-bar progress='1' max='6' error="true"></progress-bar>

Я просто пытаюсь передать информацию из элемента ^^ в html в мою директиву и обработать информацию, чтобы соответствующим образом изменить индикатор выполнения.

Это работает для «прогресса» и «макс», которые принимают целочисленные значения, но по какой-то причине код с комментариями, который обрабатывал бы «ошибку» (которая является строкой), вызывает проблемы. Я новичок в angularJS, поэтому я сожалею, если какое-либо из этого звучит сбивающим с толку или непонятным ... спросите, нужно ли мне уточнять/разъяснять. Заранее спасибо!

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

В вашей директиве вы используете двунаправленную привязку атрибутов из глобальной области действия в локальную область директивы.

В этом режиме значение атрибута в HTML оценивается как выражение и, таким образом, ваша директива пытается связать свою локальную scope.error в результате оценки истинного как выражение.

При тестировании scope.error == "true", вы на самом деле тестирования true == "true", и это имеет значение ложных в JavaScript.

Чтобы устранить проблему, вы можете:

• либо использовать строку в кавычках, когда звонит директиву:

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

• или изменить режим привязки в вашей директиве, так как вы не необходимо двунаправленное связывание. @ переменные всегда имеют строку типа.

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

Вы можете найти более подробную информацию о режимах связывания в Angular $compile documentation