UI Bootstrap 在 <uib-tabset> 指令周围添加 <div>，破坏 CSS答案

【问题标题】：UI Bootstrap adds <div> around <uib-tabset> directive, breaking CSSUI Bootstrap 在 <uib-tabset> 指令周围添加 <div>，破坏 CSS
【发布时间】：2015-12-20 19:39:37
【问题描述】：

当使用 UI Bootstrap 中包含的 <uib-tabset> 时，指令模板用一个空的 <div> 元素包围生成的无序列表。

<div>
  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
  <div class="tab-content">
    <div class="tab-pane" 
         ng-repeat="tab in tabs" 
         ng-class="{active: tab.active}"
         uib-tab-content-transclude="tab">
    </div>
  </div>
</div>

这导致我的 CSS 中断，因为 CSS 选择器如下。

.tabbable-custom > .nav-tabs > li.active {
    ...
}

当我使用<uib-tabset> 时，该规则不会被选中，因为层次结构现在是

.tabbable-custom > div > .nav-tabs > li.active {
    ...
}

我可以避免覆盖我的整个 CSS 库来解决添加的 <div> 问题吗？

更新：

这是我模板中的 html：

<div class="portlet-body">
    <div class="tabbable-custom">
        <uib-tabset>
            <uib-tab ng-repeat="tabData in tabDataArray" heading="{{ tabData.heading }}">

这是生成的 DOM：

<div class="portlet-body">
    <div class="tabbable-custom">
        <div class="ng-isolate-scope">
            <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">

我可以通过禁用 debugInfo 来删除 class="ng-isolate-scope"，但这对 CSS 没有影响。

更新 2： 另一种解决方案可能是从我的模板 HTML 中删除 <div class="tabbable-custom">，并将该类添加到 <uib-tabset> 指令放置的空 <div>。 UI Bootstrap 有这种可能性吗？

【问题讨论】：

我们可以看到声明了 uib-tabset 的 html 吗？我正在使用标签集并且没有空的 DIV。我的 div 上有一类“BLAH”，即 uib-tabset，然后我的 css 显示 .BLAH ul，它工作正常。
嗨，Scott，我已经用模板与 DOM 比较更新了帖子。

标签： css angularjs angular-ui-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

通过覆盖 UI Bootstrap 模板来完成我需要的工作，如以下问题所述：Can you override specific templates in AngularUI Bootstrap?

【讨论】：

【解决方案2】：

我在使用odetocode 示例时遇到了同样的问题，该示例使用angular-ui router 实现了tabset。并在 DOM 中准确添加了 DIV 和 "ng-isolate-scope" 类。我试图通过删除额外创建的div 来覆盖从 ui-bootstrap-tpl.js 实现的这个块，最后它起作用了。

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tabset.html",
    "<div>\n" +
    "  <ul class=\"nav nav-{{type || 'tabs'}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
    "  <div class=\"tab-content\">\n" +
    "    <div class=\"tab-pane\" \n" +
    "         ng-repeat=\"tab in tabs\" \n" +
    "         ng-class=\"{active: tab.active}\"\n" +
    "         uib-tab-content-transclude=\"tab\">\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

还有另一种方法。您还可以通过将相关样式更改为此格式来覆盖 CSS 样式：

.tabbable-custom > .ng-isolate-scope > .nav-tabs

第二种方法可能看起来很无聊。但你确定tabset模板保持原样，不会与其他tabset页面发生冲突。

【讨论】：