Ho finito per applicare patch al file ui-bootstrap. Sono ancora un noob con AngularJS, quindi per favore perdona il gergo. Questo è un hack non convenzionale, e deve essere refactored con ng-animate, ma funziona.
aperto ui-bootstrap-TPLS-0.10.0.js e cerca la 'scheda' direttiva:
.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'
},
// ...
Avviso il codice aggiuntivo per recuperare il valore di attributo id (via inclusione, immagino).
Poche righe sotto, cercare:
scope.$watch('active', function(active) {
e patch in questo modo:
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
}
});
Poche righe sotto, guarda per:
scope.select = function() {
e aggiungere all'interno:
$(".tab-pane").hide();
così tutti i riquadri della scheda nascondere correttamente in un primo momento.
Poi, cercare:
angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) { ...
e aggiungere la classe CSS all'elemento scheda-riquadro del corrispondente modello, in questo modo:
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" +
"");
}]);
Una volta che l'ui-bootstrap.il file js viene modificato, è necessario modificare il modello di vista (in cui si recupera lo schede) e dichiarare l'attributo 'id':
<!-- TABS -->
<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" id="{{tab.id}}" >
// ... TAB CONTENT
si dovrebbe ottenere il concetto di base, attualmente non è molto elegante (per mettilo mite). Ma funziona.
Nel caso in cui ci si chiede come i miei schede ottenuto id, beh, li ho iniettato nel mio controller:
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,
};
Naturalmente si tratta di dati mockup, ma assumendo le schede e il loro contenuto sono dinamici, è puoi usare un contatore e magari usare un altro tasto invece di "id" (ma dovrai cambiare il resto di conseguenza).
Prova a leggere la documentazione per $ animate - forse ti darà un'idea. – lort
Lo farò ... Spero che ci sia una soluzione rapida che ho trascurato, dato che con bootstrap3 js è piuttosto facile da fare – urish