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:
- 将
Outer
、Blah
和Inner
文本元素保留在超链接内 - 在单个
标签内包含
Blah
和Inner
- 确保没有
标签相互嵌套
- Keep
Outer
,Blah
andInner
text elements inside hyperlinks - Contain
Blah
and<a>Inner</a>
inside a single<p>
tag - 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屋!