我最终修补了 ui-bootstrap 文件。我仍然是 AngularJS 的菜鸟,所以请原谅行话。这是一个非常规的 hack,需要使用 ng-animate 进行重构,但它确实有效。
打开ui-bootstrap-tpls-0.10.0.js并查找“tab”指令:
.directive('tab', ['$parse', function($parse) {
return {
require: '^tabset',
restrict: 'EA',
replace: true,
templateUrl: 'template/tabs/tab.html',
transclude: true,
scope: {
id:'@', // PATCH : GETTING TAB 'id' ATTRIBUTE
heading: '@',
onSelect: '&select', //This callback is called in contentHeadingTransclude
//once it inserts the tab's content into the dom
onDeselect: '&deselect'
},
// ...
请注意用于检索 id 属性值的额外代码(我猜是通过嵌入)。
下面几行,寻找:
scope.$watch('active', function(active) {
并像这样修补它:
scope.$watch('active', function(active) {
// Note this watcher also initializes and assigns scope.active to the
// attrs.active expression.
setActive(scope.$parent, active);
if (active) {
tabsetCtrl.select(scope);
scope.onSelect();
tab_id = attrs.id;
$(".tab_pane_"+tab_id).hide(); // HIDE AT FIRST, SO IT CAN ACTUALLY FADE IN
$(".tab_pane_"+tab_id).fadeIn(1000); // JQUERY TARGETING BY CLASS
} else {
scope.onDeselect();
tab_id = attrs.id;
$(".tab_pane_"+tab_id).hide(); // JQUERY TARGETING BY CLASS
}
});
下面几行,寻找:
scope.select = function() {
并在里面添加:
$(".tab-pane").hide();
所以所有选项卡窗格一开始都会正确隐藏。
然后,寻找:
angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) { ...
并将 css 类添加到相应模板中的 tab-pane 元素中,如下所示:
angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/tabs/tabset.html",
"\n" +
"<div class=\"tabbable\">\n" +
" <ul class=\"nav {{type && 'nav-' + type}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
" <div class=\"tab-content\">\n" +
" <div class=\"tab-pane tab_pane_{{tab.id}}\" \n" + // CLASS NAME IS DYNAMIC
" ng-repeat=\"tab in tabs\" \n" +
" ng-class=\"{active: tab.active}\"\n" +
" tab-content-transclude=\"tab\">\n" +
" </div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
修改 ui-bootstrap .js 文件后,您必须编辑视图模板(在其中获取选项卡)并声明“id”属性:
<!-- TABS -->
<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" id="{{tab.id}}" >
// ... TAB CONTENT
您应该了解基本概念,目前它不是很优雅(委婉地说)。但它有效。
如果您想知道我的标签是如何获得 id 的,那么我将它们注入到我的控制器中:
Tab1 = {
id:1,
'ShortDescription': ShortDescription,
'FullDescription': FullDescription,
'TabContent': TabContent1,
title: "ProductTabTitleDefault1",
// active:true
};
Tab2 = {
id:2,
'ShortDescription': ShortDescription,
'FullDescription': FullDescription,
'TabContent': TabContent1,
title: "ProductTabTitleDefault2",
// active:true
};
$rootScope.tabs = {
'Tab1': Tab1,
'Tab2': Tab2,
};
当然这是模型数据,但假设您的选项卡及其内容是动态的,您可以使用计数器,并且可能使用另一个键而不是“id”(但您必须相应地更改其余部分)。