您好,我正在尝试重现以下代码,它在 Bootstrap 中生成一个简单的下拉菜单:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
但是,我希望能够将 li 标签包含在 angularJS 的 ng-include 中......
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<ng-include src="'partials/thisView.html'"></ng-include>
</ul>
</li>
然后在这个 View 中我会:
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
但是问题是,当我这样做时,li 标签的父标签不是 ng-include 标签,也不是导致格式看起来很差的 ul 标签(没有应用任何 Bootstrap 类/CSS)。
所以 DOM 看起来像这样:
<ul class="dropdown-menu role="menu">
<ng-include src="'partials/thisView.html'" class="ng-scope"> <li class="ng-scope"><a href="#">Action</a></li>
<li class="ng-scope"><a href="#">Another action</a></li>
<li class="ng-scope"><a href="#">Something else here</a></li>
<li class="divider ng-scope"></li>
<li class="ng-scope"><a href="#">Separated link</a></li>
<li class="divider ng-scope"></li>
<li class="ng-scope"><a href="#">One more separated link</a></li>
</ng-include>
</ul>
有解决办法吗?
最佳答案
您可以使用属性限制而不是元素限制(因为 ng-include 支持 ECA
)并指定 ng-include
作为属性。
即
<ul class="dropdown-menu" role="menu" ng-include="'partials/thisView.html'">
</ul>
关于javascript - ng-include 破坏了 bootstrap ul li 下拉格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30268304/