[英]handlebars-like templating in angular
I really struggle on how to do templating in angular. 我真的很难在角度上做模板。 So I have a table, I'm populating it like this: 所以我有一张桌子,我像这样填充它:
<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>
But i really would like to have, something more like: 但我真的很想拥有更多类似的东西:
<td reportNumber="{numberOne: store.day_one.visitor_count,
numberTwo: store.difference.visitor_count}>
</td>
Option 1: 选项1:
Write a directive, that creates the appriopriate html and append it to td... but how to write html-strings in directives? 编写指令,该指令创建适当的html并将其附加到td ...,但是如何在指令中编写html-strings? I couldn't find a util method in angular that allows me to write html-strings in a nice way and writing it like '<p>' + 'numberOne' + </p>...
is a pain. 我找不到用angular编写的util方法,该方法允许我以一种不错的方式编写html字符串,并且像'<p>' + 'numberOne' + </p>...
那样编写它很痛苦。
But there are also partials, couldn't I just use partials and populate them in the directive? 但是也有局部变量,我不能只使用局部变量并在指令中填充它们吗? I wasn't able to find a proper way to load them and fetching them via $http seems strange. 我找不到合适的方法来加载它们,并通过$ http获取它们似乎很奇怪。
Option 2: 选项2:
Use ng-include
directly, but how to create scope variables in the view in a appropriate way?. 直接使用ng-include
,但是如何以适当的方式在视图中创建作用域变量? I could to something like: 我可以这样:
<td dummyVar="{{ numberOne = store.day_one.visitor_count;
numberTwo = store.difference.visitor_count}}"
ng-include="'/static/angular/views/partials/reportNumber.html'">
</td>
But this seems rather hacky than clean and I don't know if there could be problems with redefining these variables all the time. 但是,这似乎很hacky,而不是干净,而且我不知道是否始终存在重新定义这些变量的问题。
My Question: How to create the table in a nice way using templates ? 我的问题:如何使用模板以不错的方式创建表?
Use a directive as simple as: 使用一个简单的指令:
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: "="
}
};
});
And use it like: 并像这样使用它:
<td mytd="" num="store.day_one.visitor_count" diff="store.difference.visitor_count"></td>
See fiddle: http://jsfiddle.net/ztxTe/ 参见小提琴: http : //jsfiddle.net/ztxTe/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.