UI引导程序在<uib-tabset>指令周围添加<div>，从而破坏CSS。

Question

当使用UI引导程序中包含的<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="">

我可以通过禁用class="ng-isolate-scope"来删除debugInfo，但这与CSS没有什么区别。

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

Answer 1

通过覆盖UI引导模板(如本问题中所解释的)，成功地完成了我所需的工作：您能覆盖AngularUI引导中的特定模板吗？

Answer 2

我在使用odetocode示例时遇到了同样的问题，即用角用户界面路由器实现表集。在DOM中，精确地添加了一个带有"ng-isolate-scope"类的DIV。我试图通过删除额外创建的div来覆盖这个从ui引导-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页面发生冲突。