bootstrap-scrolling-tabs to implement scrollable tabs with angular-bootstrap element.
here is my code
<div class="abc">
<div class="panel panel-default abcd" >
<div scrolling-tabs-wrapper>
<tabset>
<tab class="verticalText" heading="{{evi.evidenceIdentifier}}" ng-repeat="evi in examinationCtrl.getEvidences(examinationCtrl.currentDocument)"
select="examinationCtrl.selectEvidence(evi.sss)">
<div class="embed-responsive-pdf embed-responsive" ng-style="style()">
<div embed-src="{{examinationCtrl.urlForEvidence(evi.sss)}}"
class="embed-responsive-item embed-progress"></div>
</div>
</tab>
</tabset>
</div>
</div>
</div>
I am getting below error when I run this. Any idea whats wrong with this ?
Controller 'tabset', required by directive 'tabContentTransclude', can't be found!
First make sure: Is the UI Bootstrap library (ui.bootstrap.tabs) added as a dependency?
I've experienced the same error when I extended the scrolling-tabs-wrapper to add new tabs dynamically. As soon as I added a tab to the underlying array the error occured. My search for the error cause brought me here.
I assume the data generated by examinationCtrl.getEvidences() isn't static. Try to provide a static tabs array in your controller and use it in the tab/ng-repeat element and see if that works.
The reason this error is thrown is the following statement in the method "moveTabContentOutsideScrollContainer" in the ElementsHandler:
$tabsContainer.find('.tab-content').appendTo($tabsContainer);
This moves the element with ".tab-content" out of scope so that the UI Bootstrap controller "tabset" cannot find it anymore. To fix this, I've added an additional function in my custom scrolling-tabs to move it back in scope if I change the initial tabs array.