css - 列表的 Angular 指令和 ng-repeat；不继承父类

Question

我正在尝试将标准列表项格式包装在 Angular 指令中，然后在各种列表类型中将其与 ng-repeat 一起使用。问题是，该指令似乎丢失了父级的类，因此列表没有按应有的方式呈现。这是一个例子:

<ul class="nav nav-pills nav-stacked affix">
  <div ng-repeat="item in items">
    <my-list-item item="item"></my-list-item>
  </div>
</ul>

呈现完全一样:

<ul class="nav navbar-nav navbar-right">
  <div ng-repeat="item in items">
    <my-list-item item="item"></my-list-item>
  </div>
</ul>

因此，这两个渲染完全相同，都不是我想要的方式。如何让我的列表项指令知道其父类？

编辑:

<ul class="nav nav-pills nav-stacked affix">
  <li ng-repeat="item in items">
    <my-list-item item="item"></my-list-item>
  </li>
</ul>

my-list-item 指令看起来像这样:

<a class="myClass" href="{{item.target}}"><span ng-bind-html="item.text"></span></a>

Answer 1

<div>不是 <ul> 的有效子项首先。真正唯一有效的 child 是<li>

bootstrap css 也不会期望它。使用与 Bootstrap 建议的标记相匹配的标记，并应用文档中使用的任何适当的类。

至于在 <my-list-item> 中呈现的内容如果 html 也有问题，您将需要显示该 html 的外观

引用 W3C <UL> Specs

Permitted contents

zero or more li elements