ng-repeat div 中的表上的 ng-repeat 在自定义过滤数据上未按预期工作

Question

以下（所需的）模板无法按预期工作（每年一个 div，每个包含一个每个月的表格 - 传统的年度计划风格日历）：

<div ng-repeat="year in calendar | ToCalendar">
  {{year.name}}
  <table ng-repeat="month in year.children">
    <caption>{{month.name}}</caption>
    <tr>
      <th ng-repeat="d in month.children[1].children track by $index">
        {{d}}
      </th>
    </tr>
    <tr ng-repeat="week in month.children">          
      <td ng-repeat="d in week.children track by $index">
        {{d.day.format('DD')}}
      </td>
    </tr>
  </table>
</div>

外部 div 元素在表格之前关闭（至少在 chrome 中），因此表格上的 ng-repeat 没有所需的父范围。所以所有的渲染都是每年的一个 div。

$scope.calendar 是一个 moment.js 对象数组。自定义过滤器“ToCalendar”使用创建附加属性（年、月、工作日和周）允许 _.nest() 按年、月和周嵌套这些属性。为了给出结构的概念，模板中的以下内容：

<pre>{{calendar | ToCalendar | json}}</pre>

以下结果被渲染：

[
  {
    "name": "2014",
    "children": [
      {
        "name": "September",
        "children": [
          {
            "name": "36",
            "children": [
              null,
              {
                "year": 2014,
                "month": "September",
                "week": "36",
                "weekday": "1",
                "day": "2014-08-31T23:00:00.000Z" //Is in fact a moment() object
              }
              ...

如果我更改所需的模板，以便表格及其子元素是具有 css“显示：表格”等的 div，它会根据需要呈现。如果我将外部 div 更改为 span 并使用 ng-repeat-start （以及后面带有 ng-repeat-end 的空元素），但将表格元素保留为真正的表格元素，它就可以工作。这个 hacky 修复可能通过强制表格元素在正确的父范围内来工作。

过滤器“ToCalendar”似乎导致重复的 div 提前关闭，但为什么呢？为什么内部元素是否是div有什么区别？

---

JS 小提琴：working fiddle。见 cmets。

Answer 1

问题显然出在模板的不同部分，因为剥离回所需的模板修复了它。