ng-include 破坏了引导 ul li 下拉格式答案

【问题标题】：ng-include ruins the bootstrap ul li dropdown formattingng-include 破坏了引导 ul li 下拉格式
【发布时间】：2015-07-27 21:32:38
【问题描述】：

您好，我正在尝试重现以下代码，它会在引导程序中生成一个简单的下拉菜单：

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

然后在这个视图中我会有：

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

有没有办法解决这个问题？

【问题讨论】：

以下答案有什么好运气了吗？

标签： javascript html angularjs twitter-bootstrap angularjs-ng-include

【解决方案1】：

您可以使用属性限制而不是元素限制（因为ng-include 支持ECA）并指定ng-include 作为属性。

即

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

【讨论】：

因为这种行为浪费了 30 分钟。谢谢。