Угловая директива Directive String - программирование

Эта директива пытается создать элемент 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
}

});

Ответ 1

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

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

Когда вы тестируете scope.error == "true", вы фактически тестируете true == "true", и это оценивается как false в javascript.

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

либо используйте строку с кавычками при вызове вашей директивы:
```
<progress-bar progress='1' max='6' error="'true'"></progress-bar>
```
или измените режим привязки в своей директиве, так как вам не требуется двунаправленная привязка. @переменные всегда имеют строку типа.
```
return {
    restrict: 'AE',
    scope: {
       max: '@max',
       progress: '@progress',
       error: '@error'
    },
    link: compileProgressBar
}
```

Дополнительную информацию о режимах привязки можно найти в Angular компилировать документацию