我真的很纠结于如何用 Angular 进行模板化。所以我有一张 table ,我是这样填充它的:
<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
直接,但如何以适当的方式在 View 中创建范围变量?。我可以这样:
<td dummyVar="{{ numberOne = store.day_one.visitor_count;
numberTwo = store.difference.visitor_count}}"
ng-include="'/static/angular/views/partials/reportNumber.html'">
</td>
但是这看起来有点老套而不是干净,而且我不知道一直重新定义这些变量是否会出现问题。
我的问题:如何使用模板以良好的方式创建表格?
最佳答案
使用如下简单的指令:
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>
参见 fiddle :http://jsfiddle.net/ztxTe/
关于javascript - Angular 类似 Handlebars 的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19179663/