ng-include破坏了bootstrap ul li下拉格式

Question

您好我正在尝试重现下面的代码片段,它在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>

但是,我希望能够在angularJS的ng-include中包含li标签...

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

然后在thisView中我会:

            <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标签,这导致格式看起来很差(没有应用任何引导类/ 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>

有没有解决的办法？

Answer 1

您可以使用属性限制而不是元素限制(作为ng-include支持ECA)并指定ng-include为属性.

即

  <ul class="dropdown-menu" role="menu" ng-include="'partials/thisView.html'">
  </ul>