ng-repeat 插入空锚标签 [英] ng-repeat inserting empty anchor tags

问题描述

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

I'm trying to create a menu using angular. A menu item can have children requiring another ng-repeat to print the sub nav items. I'm noticing some strange behavior when attempting to insert an anchor tag within the 2nd ng-repeat.

小提琴链接:http://jsfiddle.net/npU7t/

<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>

重复/空锚标记从何而来?如何防止它被创建?

Where the did duplicate / empty anchor tag come from? How can I prevent it from being created?

感谢您的帮助！

推荐答案

这不是 Angular 的错误，而是您如何设置标记.

This isn't a bug with Angular, but rather how you have your markup.

问题实际上是嵌套的 标签，而不是

标签.

The issue is actually the nested <a> tag, not the <ul> tag.

<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/

In fact, if you remove Angular from the equation altogether, you will see that the extraneous <a> tag is still added to the DOM: http://jsfiddle.net/jwcarroll/cXkj4/

如果去掉嵌套的 标签，多余的元素就会消失.

If you get rid of the nested <a> tag, then the extra element will disappear.

<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> 标签是一个没有.

In both HTML 4.01, and HTML 5, having a nested <a> tag is a no no.

我能想出的最简单的问题重现就是这个标记:

The simplest possible recreation of the problem I could come up with is this bit of markup:

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

因为您不能将 <a> 元素相互嵌套，浏览器会尽最大努力重新创建您的意图，同时保持 DOM 干净.你最终得到的是这样的:

Because you can't nest <a> elements within each other, the browser is doing it's best to recreate your intent while keeping the DOM clean. What you end up with is this:

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

当您意识到浏览器正在尝试做什么时，这是有道理的.浏览器正在尝试做三件事:

This makes sense when you realize what the browser is trying to do. The browser is trying to do three things:

1. 将 Outer、Blah 和 Inner 文本元素保留在超链接内
2. 在单个

   标签内包含 Blah 和 Inner

3. 确保没有 标签相互嵌套
1. Keep Outer, Blah and Inner text elements inside hyperlinks
2. Contain Blah and <a>Inner</a> inside a single <p> tag
3. Ensure no <a> tags are nested within each other

实现这三个目标的唯一合理方法是将 Outer 和 Blah 文本元素包装在单独的 标签中以一种非嵌套的方式.这是在不违反 DOCTYPE 规则的情况下最接近原始意图的方法.

The only sensible way to accomplish all three of these is to wrap both Outer and Blah text elements in separate <a> tags in a way that isn't nested. This is the closest approximation to the original intent without breaking the DOCTYPE rules.

我希望这会有所帮助.

这篇关于ng-repeat 插入空锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！