2

属性を介していくつかの構成オプションを受け入れる angularJs で単純なディレクティブを構築しようとしていますが、属性が設定されていない場合は、属性のデフォルト値を設定したいと考えています。

これが私の範囲を説明する方法です：

scope :  {
            classes: '@',
            progress: '@'
         }

これらの属性は、次の方法でビューに表示されます。

<div class="{{classes}}">
    <div style="width: {{progress}}%;" class="bar"></div>
</div>

リンク関数では、次のようにデフォルト値を設定しようとしています:

link: function(scope, el, attrs)
        {
           console.log( scope.classes, scope.progress );
           if (typeof scope.classes === 'undefined')
               scope.classes = 'progress progress-warning';

           if (typeof scope.progress === 'undefined')
               scope.progress = 99;
           console.log( scope.classes, scope.progress );
        }

コンソール出力は次のとおりです。

undefined undefined
progress progress-warning 99

したがって、スコープ内で値が正しく設定されているようです。ただし、実際の html 出力では、属性はレンダリングされていません。結果の HTML は次のとおりです。

<div class="">
    <div class="bar" style="width: %;"></div>
</div>

ただし、html から属性を呼び出すときにこれらの属性をインラインで指定すると、次のようになります。

<my-directive data-progress="60" data-classes="progress" />

それはうまく表示されます：

<div class="progress" data-progress="60" data-classes="progress">
    <div class="bar" style="width: 60%;"></div>
</div>

私の質問は、 を呼び出すだけで<my-directive />、リンク関数から、進行状況とクラスのデフォルト値が想定どおりに設定されないのはなぜですか? （そして、それがコンソールに表示されたにもかかわらず）

4

3 に答える 3

4

これを試して：

link: function(scope, element, attrs) {
    scope.classes = attrs.classes || 'progress progress-warning';
    scope.progress = attrs.progress || 99;
}

scope : { classes: '@', progress: '@' }そして、ディレクティブの一部を捨てることができます。

ディレクティブを書くのに苦労されているようですね。私が最近実装したこれをチェックしてください。おそらく、それはあなたのものをまとめるのに役立つでしょう.

于 2013-08-10T03:00:44.093 に答える