1

我真的很纠结如何用角度做模板。所以我有一张桌子，我像这样填充它：

 <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 字符串？我在 Angular 中找不到一个 util 方法，它允许我以一种很好的方式编写 html 字符串，并且像这样编写它'<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>

但这似乎比干净更 hacky，我不知道重新定义这些变量是否会出现问题。

我的问题：如何使用模板以一种很好的方式创建表格？

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 回答