AngularJS指示文渡す文字列

Question

このディレクティブは、ページ移動の進行状況を示すプログレスバーと呼ばれるHTML要素を作成しようとしています。 <progress-bar progress='1' max='6' error="true"></progress-bar> htmlの^^要素の情報をmyディレクティブに渡し、情報を処理してプログレスバーを適切に変更しようとしています。

これは整数値をとる「進捗状況」と「最大」で動作しますが、何らかの理由で「エラー」（文字列）を処理するコメントアウトされたコードが問題を引き起こしています。私は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> 
  

• をかあなたがいないので、あなたのディレクティブであなたの結合様式を変更します双方向結合が必要です。 @変数は常にstring型です。

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

あなたは）（history.backが何であるかをAngular $compile documentation