UI Bootstrap在指令下添加，打破CSS。[英]UI Bootstrap adds around directive, breaking CSS 本文翻译自 Jule Slootbeek 查看原文 2015-12-09 3847 div/

When using <uib-tabset> included in UI Bootstrap, the directive template surrounds the resulting unordered list with an empty <div> element.

当在UI Bootstrap中使用时，指令模板将生成的无序列表与一个空的

元素放在一起。

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

This is causing my CSS to break since the CSS selectors are as follows.

由于CSS选择器如下所示，这导致我的CSS中断。

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

When I use <uib-tabset>, this rule isn't picked up because the hierarchy is now

当我使用< uibt -tabset>时，这个规则不会被接受，因为它现在是层次结构。

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

Can I avoid having to overwrite my entire CSS library to account for this added <div>?

我是否可以避免重写整个CSS库来解释这个添加的

Update:

更新:

Here is the html from my template:

以下是我模板中的html:

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

and here is the resulting DOM:

这里是结果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="">

I can remove the class="ng-isolate-scope" by disabling debugInfo, but it doesn't make a difference with the CSS.

我可以通过禁用debugInfo来删除类=“ng-isolate-scope”，但它与CSS并没有什么不同。

Update 2: Another solution could be to remove the <div class="tabbable-custom"> from my template HTML, and add that class to the empty <div> that the <uib-tabset> directive places. Is this a possibility with UI Bootstrap?

更新2:另一个解决方案是，从我的模板HTML中删除

，并将这个类添加到< uibt -tabset>指令位置的空

中。这是UI引导的可能性吗?

2 个解决方案

#1

Managed to accomplish what I needed by overwriting the UI Bootstrap template as explained in this question: Can you override specific templates in AngularUI Bootstrap?

通过重写UI引导模板来完成我所需要的工作:您可以在AngularUI Bootstrap中重写特定的模板吗?

#2

I met the same problem when I using odetocode Example, that implements tabset with angular-ui router. and in the DOM exactly added a DIV with "ng-isolate-scope" class. I tried to override this block that achieved from ui-bootstrap-tpl.js by removing additional created div, and finally It Works.

当我使用odetocode的例子时，我遇到了同样的问题，那就是用angular-ui路由器实现了tabset。在DOM中，正好添加了一个DIV和“ng-isolate-scope”类。我试图重写从ui-bootstrap-tpl实现的这个块。通过删除额外创建的div，最后它可以工作了。

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" +
    "");
}]);

There's another approach. You can also override the CSS Styles by changing related styles to this format:

另一种方法。您也可以通过改变相关样式来覆盖CSS样式:

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

the second approach may be seems boring. But you're sure that tabset template remains intact and does not occur conflicts with other tabset pages.

第二种方法似乎很无聊。但是，您确定tabset模板仍然保持完整，并且不会与其他tabset页面发生冲突。

#1