I am using Angularstrap's Bs-tabs directive to add tabs to page.I am showing Tree View inside one tab.and I want to add SlimScroll bar to it.I am facing problem like I am unable to add Slim Scroll to both tabs.Only rail is coming,scrolling is not working
<div bs-tabs>
<div class="parent-tab" style="width:310px;height: 670px;">
<div data-title="Tab 1" >
<div treeview="true"
tree-model="treeDataInJsonFormat"
node-id="id"
tree-id="treeSchema"
node-label="displayName"
node-children="childColumn"
dbl-click-event="addToQuery(node)" class="treeView"> </div>
</div>
</div>
</div>
<script type="text/javascript">
angular.element('.parent-tab').slimScroll({
size : '7px',
position : 'right',
color : '#afb1b2',
alwaysVisible : true,
distance : '2px',
railVisible : true,
railColor : 'white',
railOpacity : 1,
opacity:1,
wheelStep : 10,
allowPageScroll : true,
disableFadeOut : true,
height:'670px',
width:'310px'
});</script>
One thing I came accross, is that using directives to manipulate content and to attach jQuery plugins is a much more sophisticated way and more generic to do.
As I was facing this problem right now, here's my (browserified) directive: