AngularJS : UI Bootstrap Tabs and Jquery Custom ScrollBar

Question

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?

Answer 1

You have declared "tabnumber" as global variable that's why it couldn't be able to support closure . define it as local var tabnumber = attrs.tabnumber; it would work fine.