In my view, I have 2 tabs generated by the UI-Bootstrap Tabs directive.
The tabs have fixed heights and "overflow-y: auto;", and receive variable content.
I'm trying to apply some nice scroolbars using the Jquery plugin Custom Content Scroller,
through a custom directive.
The custom directive is fired within the tabs.
The Custom Content Scroller Plugin comes with callbacks, which I need to make some absolute positioned gradients to visually blend the upper and lower borders of the scrollable area to the background color.
VIEW
<tabset> // UI BOOTSTRAP DIRECTIVE
<tab
ng-repeat="tab in tabs" // 2 TABS
heading="{{ tab.title | translate}}"
id="tab{{tab.id}}"
active="tab.active"
disabled="tab.disabled" >
<div class="col-sm-9 TabContent_container">
<div class="TabContent" customscrollbar ng-attr-tabnumber="{{tab.id}}">
<div marked="tab.TabContent | translate"></div>
</div>
<div class="gradient_top" id="gradient_top_{{tab.id}}"></div>
<div class="gradient_bottom" id="gradient_bottom_{{tab.id}}"></div>
</div>
</tab>
</tabset>
APP.JS
app.directive('customscrollbar', function() {
return {
scope: {},
link: function(scope,elem,attrs) {
tabnumber = attrs.tabnumber;
console.log(tabnumber); // AS EXPECTED : 1, THEN 2 (DUE TO tab ng-repeat)
elem.mCustomScrollbar({ // SEEMS TO PROPERLY GENERATE AN INSTANCE FOR EACH TAB
theme:"dark",
callbacks:{
onScrollStart: function(){
alert('tabnumber : '+tabnumber); // ALWAYS RETURNS 2 !
}
}
});
} // ----- EOF - link: function
}; // ----- EOF - return
});
Why is the onScrollStart callback referring to tab 2, while in the UI the scrollers generated are independent? The content on tab 1 scrolls independently from tab 2, but the callback is fired for both tabs, and always returns the second tab?
I also found this strange while testing :
app.directive('customscrollbar', function($timeout) {
return {
scope: {},
link: function(scope,elem,attrs) {
element_width = elem[0].offsetWidth; // FIRST PASS (TAB 1), RETURNS CORRECT WIDTH
// SECOND PASS (TAB 2), RETURNS 0 !
} // ----- EOF - link: function
}; // ----- EOF - return
});
What in the Angular world is happening?
