1

angularでテンプレートを作成する方法に本当に苦労しています。だから私はテーブルを持っているので、次のように入力しています：

 <tr ng-repeat="store in stores">
    <td>
       <p>{{store.day_one.visitor_count}}</p>
       <span>ng-class="{green: ... >= 0, red: ... < 0}"</span>
       <small>store.difference.visitor_count</small>
    </td>
    <td>
       <p>{{store.day_one.conversion_rate}}</p>
       ...
    </td>
    <td>
       ...
       <p>{{store.day_one.dwell_time}}</p>
       ...
    </td>
 </tr>

しかし、私は本当に欲しいのですが、もっと似たものがあります:

<td reportNumber="{numberOne: store.day_one.visitor_count,
                   numberTwo: store.difference.visitor_count}>
</td>

オプション1：

適切なhtmlを作成してtdに追加するディレクティブを作成します...しかし、ディレクティブにhtml文字列を書き込む方法は? 良い方法でhtml文字列を書くことができる角度のutilメソッドが見つかりませんでした。それを書く'<p>' + 'numberOne' + </p>...のは面倒です。

しかし、パーシャルもあります。パーシャルを使用してディレクティブに入力することはできませんか? それらをロードする適切な方法を見つけることができず、$http 経由でフェッチするのは奇妙に思えます。

オプション 2:

直接使用ng-includeしますが、適切な方法でビューにスコープ変数を作成する方法は?. 私は次のようなことができます：

<td dummyVar="{{ numberOne = store.day_one.visitor_count;
                 numberTwo = store.difference.visitor_count}}"
  ng-include="'/static/angular/views/partials/reportNumber.html'">
</td>

しかし、これはきれいというよりもハックに思えます。これらの変数を常に再定義すると問題が発生する可能性があるかどうかはわかりません。

私の質問:テンプレートを使用してテーブルをうまく作成するにはどうすればよいですか?

4

1 に答える 1

2

次のような単純なディレクティブを使用します。

app.directive("mytd", function() {
    return {
        template:
            "<div>" +
                "<p>{{num}}</p>" +
                "<span ng-class='{green: diff >= 0, red: diff < 0}'></span>" +
                "<small>{{diff}}</small>" +
            "</div>",
        scope: {
            num: "=",
            diff: "="
        }
    };
});

そして、次のように使用します。

<td mytd="" num="store.day_one.visitor_count" diff="store.difference.visitor_count"></td>

フィドルを参照してください：http://jsfiddle.net/ztxTe/

于 2013-10-04T11:24:02.380 に答える