Angular ng-repeat-start 在 ng-repeat-end 的不同“级别”标签内。它是一个错误吗？

Question

我遇到了这种情况，我需要使用 ng-repeat-start / ng-repeat-end 重复一个 HTML 代码块，但有角度抱怨：

错误：[$compile:uterdir] 未终止的属性，找到 'ng-repeat-start' 但没有找到匹配的 'ng-repeat-end'。

我找到了一种解决方法，它可能对遇到这种情况的人有用。我也想知道你的想法。它是一个错误吗？我应该避免这种方法吗？我正在使用 Angular v1.3.5，代码是这样的：

<table>
  <thead>
    ...
    <tr ng-repeat-start="a in b">
      ...
    </tr>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <thead>
    ...
    <tr ng-repeat-end>
      ...
    </tr>
    ...
  </thead>
</table>

问题似乎是 ng-repeat-end 不在同一个 HTML 标记块内（这里是第一个 thead ng-repeat-start 在里面）。

我找到了使用以下代码的解决方法：

<table>
  <thead>
    ...
  </thead>
  <thead ng-repeat-start="a in b">
    <tr>
      ...
    </tr>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <thead>
    ...
  </thead>
  <thead ng-repeat-end>
    <tr>
      ...
    </tr>
    ...
  </thead>
</table>

这样我将ng-repeat-start 和ng-repeat-end 放在同一个标​​签table 中。

Answer 1

ngRepeat 是一个multiElement 指令。

如果您查看$compile source，您可以看到 angularJs 将循环通过下一个 sibling 节点：

/**
 * Given a node with an directive-start it collects all of the siblings until it finds
 * directive-end.
 * @param node
 * @param attrStart
 * @param attrEnd
 * @returns {*}
 */
function groupScan(node, attrStart, attrEnd) {
  var nodes = [];
  var depth = 0;
  if (attrStart && node.hasAttribute && node.hasAttribute(attrStart)) {
    do {
      if (!node) {
        throw $compileMinErr('uterdir',
                  "Unterminated attribute, found '{0}' but no matching '{1}' found.",
                  attrStart, attrEnd);
      }
      if (node.nodeType == NODE_TYPE_ELEMENT) {
        if (node.hasAttribute(attrStart)) depth++;
        if (node.hasAttribute(attrEnd)) depth--;
      }
      nodes.push(node);
      node = node.nextSibling;
    } while (depth > 0);
  } else {
    nodes.push(node);
  }

  return jqLite(nodes);
}

在个人帐户中，尝试将其与非兄弟元素一起使用对于 HTML 的树状本质来说是非常不自然的。