Angular 列表的指令和 ng-repeat；不继承父级 Class

Question

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

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

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

编辑：

<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。真正有效的 child 是 <li>

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

至于在 <my-list-item> 中呈现的内容，如果 html 也有问题，您需要展示它的样子

Permitted contents

zero or more li elements

Angular Directives and ng-repeat for Lists; Doesn't Inherit Parent Class