angularjs - AngularJS - 双 ng-repeater 和标记奇怪的行为

Question

我在一个应用程序中遇到了这个问题，并设法隔离了这个问题。我在另一个 ng-repeat 中有一个 ng-repeat。它会按预期工作，除了<a>来自外部 ng-repeat 的标签以某种方式最终在内部标签内重复。有点难以解释，所以这里是代码：

<ul class="nav nav-list">
    <li ng-repeat="item in items">
        <a href="upperLevel.html" >               
            <span >{{item.name}}</span>                     
            <ul >
                <li ng-repeat="menuSubItem in item.menuItems" >
                   This text is wrapped again in the upperLevel a ???
                   <a href="#" >                         
                        <span > {{menuSubItem.name}}</span>
                    </a>
                </li>
            </ul>
        </a>
    </li>
</ul>

结果（对于具有 menuItems 的项目）如下所示：

<li ng-repeat="item in items" class="ng-scope">
        <a href="upperLevel.html">               
            <span class="ng-binding">Test</span>                     
            </a><ul><a href="upperLevel.html">
                </a><!-- ngRepeat: menuSubItem in item.menuItems --><li ng-repeat="menuSubItem in item.menuItems" class="ng-scope"><a href="upperLevel.html">
                   This text is wrapped again in the upperLevel a ???
                   </a><a href="#">                         
                        <span class="ng-binding">----- TestSub3</span>
                    </a>
                </li><li ng-repeat="menuSubItem in item.menuItems" class="ng-scope"><a href="upperLevel.html">
                   This text is wrapped again in the upperLevel a ???
                   </a><a href="#">                         
                        <span class="ng-binding">----- TestSub4</span>
                    </a>
                </li>
            </ul>

    </li>

“此文本 [...]” 部分被包裹在外部<a>. 如果将<a>其替换为<div>. 任何人都知道为什么会这样？

http://jsfiddle.net/68CYt/5/

Answer 1

它不是 ng-repeat 标记，而是标记在其中的位置：将结束</a>标记向上移动到跨度正下方，因此它看起来像这样：

<li ng-repeat="item in items">
  <a href="upperLevel.html" >               
     <span >{{item.name}}</span>   
  </a>

这是完整的小提琴。