UI Bootstrap 在 <uib-tabset> 指令周围添加 <div>,打破 CSS
UI Bootstrap adds <div> around <uib-tabset> directive, breaking CSS
当使用 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 没有影响。
更新二:
另一种解决方案是从我的模板 HTML 中删除 <div class="tabbable-custom">
,并将 class 添加到 <uib-tabset>
指令放置的空 <div>
中。 UI Bootstrap 有这种可能性吗?
通过覆盖 UI Bootstrap 模板来完成我所需要的,如以下问题所述:Can you override specific templates in AngularUI Bootstrap?
我在使用odetocode Example, that implements tabset with angular-ui router时遇到了同样的问题。并在 DOM
中恰好添加了 DIV
和 "ng-isolate-scope"
class。我试图通过删除额外创建的 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
第二种方法可能看起来很无聊。但您确定标签集模板保持完整并且不会与其他标签集页面发生冲突。
当使用 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 没有影响。
更新二:
另一种解决方案是从我的模板 HTML 中删除 <div class="tabbable-custom">
,并将 class 添加到 <uib-tabset>
指令放置的空 <div>
中。 UI Bootstrap 有这种可能性吗?
通过覆盖 UI Bootstrap 模板来完成我所需要的,如以下问题所述:Can you override specific templates in AngularUI Bootstrap?
我在使用odetocode Example, that implements tabset with angular-ui router时遇到了同样的问题。并在 DOM
中恰好添加了 DIV
和 "ng-isolate-scope"
class。我试图通过删除额外创建的 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
第二种方法可能看起来很无聊。但您确定标签集模板保持完整并且不会与其他标签集页面发生冲突。