Question

我正在尝试使用angular创建一个菜单。菜单项可以让孩子需要另外的ng-repeat来打印子导航项。当我尝试在第二个ng-repeat中插入一个锚标签时，我注意到了一些奇怪的行为。

<li ng-repeat="sub_menu_item in menu_item.sub_menu">
    <a href="">
        {{ sub_menu_item.title }}
    </a>
</li>

使用

{
    title: 'menu item with children',
    sub_menu: [
        {
            title: '<-- empty anchor tag???'
        }
    ]
}

结果

<li ng-repeat="sub_menu_item in menu_item.sub_menu" class="ng-scope">
    <a href=""></a>
    <a href="" class="ng-binding"><-- empty anchor tag???</a>
</li>

复制/空锚标记来自何处？如何防止它被创建？

感谢帮助！

Answer 1

这不是Angular的错误，而是你的标记方式。

UPDATE：

问题实际上是嵌套的<a>标记，而不是<ul>标记。

<a href="">
     <span class="title">{{ menu_item.title }}</span>
     <ul class="sub-menu" ng-if="menu_item.sub_menu">
         <li ng-repeat="sub_menu_item in menu_item.sub_menu">
             <a href="">
                 {{ sub_menu_item.title }}
             </a>
         </li>
     </ul>
</a>

事实上，如果您从方程中完全删除Angular，您会看到无关的<a>标记仍然添加到DOM：http://jsfiddle.net/jwcarroll/cXkj4/

如果你摆脱了嵌套的<a>标签，那么额外的元素就会消失。

<a href="">
   <span class="title">{{ menu_item.title }}</span>
</a>
<ul class="sub-menu" ng-if="menu_item.sub_menu">
   <li ng-repeat="sub_menu_item in menu_item.sub_menu">
       <a href="">
           {{ sub_menu_item.title }}
       </a>
   </li>
</ul>

在HTML 4.01和HTML 5中，拥有嵌套的<a>标记是否定的。

我可以提出问题的最简单的解决方法is this bit of markup：

<a href="">Outer
    <p>Blah
        <a href="">Inner</a>
    </p>
</a>

由于您无法将<a>个元素嵌套在一起，因此浏览器最好在保持DOM清洁的同时重新创建您的意图。你最终得到的是：

<a href="">Outer</a>
<p>
   <a href="">Blah</a>
   <a href="">Inner</a>
</p>

当您意识到浏览器正在尝试执行的操作时，这是有意义的。浏览器正在尝试做三件事：

在超链接中保留Outer，Blah和Inner个文字元素
在Blah个标记

<a>Inner</a>

<p>

确保没有<a>个标签嵌套在彼此

完成所有这三个方法的唯一合理方法是将Outer和Blah文本元素以不嵌套的方式包含在单独的<a>标记中。这是最接近原始意图的近似而不违反DOCTYPE规则。

我希望这会有所帮助。

Answer 2

很奇怪。除了<a>之外的任何标记（例如<p>或<div>），它都不会显示。这对我来说似乎是一个彻头彻尾的错误 - 我提交了一个合适的bug report。

ng-repeat插入空锚标签

2 个答案:

UPDATE：