AngularJS 지시 전달 문자열

AngularJS 지시 전달 문자열

이 지시어는 페이지를 이동할 때 진행률을 추적하는 진행률 표시줄이라는 HTML 요소를 생성하려고 합니다.다음과 같이 사용할 수 있도록 개발하려고 합니다.<progress-bar progress='1' max='6' error="true"></progress-bar>

^^의 정보를 html로 전달하고 정보를 처리하여 진행 표시줄을 적절하게 변경하려고 합니다.

이는 정수값을 받는 "progress" 및 "max"에 대해 작동하지만 어떤 이유로 "error"(문자열)를 처리하는 코멘트 아웃 코드가 문제를 일으킵니다.나는 앵귤러에 처음이야.JS 씨, 혹시 헷갈리거나 불명확하게 들린다면 죄송합니다.자세히/명료하게 해야 하는지 물어보세요.

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
}

});

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

이 모드에서는 html 내의 Atribut값이 식으로서 평가되므로 디렉티브는 true를 식으로서 평가한 결과에 로컬 scope.error를 바인드하려고 합니다.

테스트 시scope.error == "true", 실제로 테스트하고 있습니다.true == "true"javascript에서는 false로 평가됩니다.

문제를 해결하려면 다음 작업을 수행합니다.

• 디렉티브를 호출할 때 따옴표로 둘러싸인 문자열을 사용합니다.

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

• 양방향 바인딩이 필요하지 않으므로 지시문에서 바인딩 모드를 변경할 수도 있습니다.@ 변수는 항상 문자열 유형입니다.

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

바인딩 모드에 대한 자세한 내용은 Angular $compile 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/21001198/angularjs-directive-passing-string