web-dev-qa-db-ja.com

AngularJSディレクティブを渡す文字列

このディレクティブは、ページ間を移動するときに進行状況を追跡するプログレスバーと呼ばれる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
}

}）;

javascriptstringangularjsangularjs-directiveparameter-passing
62
profoundWanderer

ディレクティブでは、グローバルスコープからディレクティブローカルスコープへの属性の双方向バインディングを使用しています。

このモードでは、htmlの属性値は式として評価されるため、ディレクティブはそのローカルscope.errorを評価の結果にバインドしようとしますtrueを式として。

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 documentation を参照してください。

105
rluta