我正在尝试将标准列表项格式包装在 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>
最佳答案
<div>
不是 <ul>
的有效子项首先。真正唯一有效的 child 是<li>
bootstrap css 也不会期望它。使用与 Bootstrap 建议的标记相匹配的标记,并应用文档中使用的任何适当的类。
至于在 <my-list-item>
中呈现的内容如果 html 也有问题,您将需要显示该 html 的外观
Permitted contents
zero or more li elements
关于css - 列表的 Angular 指令和 ng-repeat;不继承父类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30021773/