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

问题描述

我试图创建采用了棱角分明的菜单。菜单项可以有另一种要求NG-重复打印分导航项目的儿童。试图插入第二NG重复内的锚标记时，我注意到一些奇怪的行为。

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>

凡没有重复/空锚标记从何而来？如何从创建prevent呢？

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

鸭preciate的帮助！

Appreciate the help!

推荐答案

这是不是与角的错误，但你在于如何有您的标记。

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

问题实际上是嵌套的＆LT; A＆GT; 标签，而不是＆LT; UL＆GT; 标记

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>

在事实上，如果你从公式中删除角干脆，你会看到，外来＆LT; A＆GT; 标记仍添加到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/

如果你摆脱嵌套的＆LT;一方式＆gt; 标签，那么多余的元素就会消失

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 ，有一个嵌套的＆LT;一个方式＆gt; 标签是一种没有没有

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>

由于不能嵌套＆LT; A＆GT; 中的每个其他元素，浏览器正在做这是最好的重建你的意图，同时保持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. 保留外，胡说和内蒙古文本元素内部链接


2. 包含胡说和＆LT; A＆GT;内＆LT; / A＆GT; 里面的一个 ＆LT; p＆GT; 标记


3. 确保没有＆LT; A＆GT; 标记嵌套彼此
中

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

要完成所有这三个唯一明智的办法是包装既外和胡说文本在不同的元素＆LT; A＆gt;在未嵌套的方式标记。这是最接近原意不打破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-重复插入空锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！