角状车把状模板

Question

我真的很纠结如何在角状态下做模板。所以我有一个表，我填充它是这样的：

<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：

写一个指令，创建appriopriate html并将其附加到td ......但如何在指令中编写html-strings？我无法找到角度允许我以很好的方式编写html字符串的util方法，并且像'<p>' + 'numberOne' + </p>...这样写就是一种痛苦。

但也有偏见，我不能只使用partials并填充它们在指令中吗？我无法找到正确的方法来加载它们，并通过$ 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> 

但这似乎不是干净而哈克，我不知道是否有可能与重新定义这些变量所有的时间问题。

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

Answer 1

使用简单，只需一个指令：

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/