javascript - 在指令模板内的 ng-repeat 中编译有条件插入的 html

Question

我有一个带有 ng-repeat 指令的指令模板，如下所示:

template: "<table ng-repeat='num in seq track by $index'><tr><td>{{$index+1}}</td><td>{{num}}</td></tr></table>"

$scope.seq 是一个数字数组，直到索引 131，此时我推送了字符串 "<span class='stayTuned'>stay tuned!</span>" .

当然，这个字符串是按原样推送的，并不是 DOM 元素。将此 html 字符串编译为 DOM 元素然后“追加”它(但在我的列表的上下文中)的最佳方法是什么？

Answer 1

如果我要重新表述一下，我是这样理解你的问题的:

How do I create a list with ng-repeat, and only if the number of list elements exceeds 131, append<span>?

如果是这样，你不需要任何花哨的 $compile - 只需使用现有的 Angular 指令 - ng-if和过滤器-limitTo - 在您的模板中。

模板(多行以提高可读性):

<table ng-repeat='num in seq | limitTo: 131 track by $index'>
  <tr>
    <td>{{$index+1}}</td>
    <td>{{num}}</td>
  </tr>
</table>
<span ng-if="seq.length > 131" class='stayTuned'>stay tuned!</span>