AngularJS 지시문 전달 문자열

AngularJS 지시문 전달 문자열

---

이 지시문은 페이지를 이동할 때 진행 상황을 추적하는 진행률 표시 줄이라는 HTML 요소를 생성하려고합니다. 나는 그것을 다음과 같이 사용하기 위해 개발하려고 노력하고 있습니다.<progress-bar progress='1' max='6' error="true"></progress-bar>

html의 ^^ 요소에서 내 지시문으로 정보를 전달하고 정보를 처리하여 진행률 표시 줄을 적절하게 변경하려고합니다.

이것은 정수 값을 취하는 "progress"및 "max"에 대해 작동하지만 어떤 이유로 "error"(문자열)를 처리하는 주석 처리 된 코드가 문제를 일으키고 있습니다. 저는 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
}

});

---

지시문에서 전역 범위의 속성을 지시문 로컬 범위로 양방향 바인딩을 사용하고 있습니다.

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

참고URL : https://stackoverflow.com/questions/21001198/angularjs-directive-passing-string