[英]AngularJS : UI Bootstrap Tabs and Jquery Custom ScrollBar
In my view, I have 2 tabs generated by the UI-Bootstrap Tabs directive. 在我看来,我有两个由UI-Bootstrap Tabs指令生成的选项卡。
The tabs have fixed heights and "overflow-y: auto;", and receive variable content. 选项卡具有固定的高度和“overflow-y:auto;”,并接收可变内容。
I'm trying to apply some nice scroolbars using the Jquery plugin Custom Content Scroller , 我正在尝试使用Jquery插件Custom Content Scroller应用一些不错的scroolbars,
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.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? 为什么onScrollStart回调引用选项卡2,而在UI中生成的滚动条是独立的? The content on tab 1 scrolls independently from tab 2, but the callback is fired for both tabs, and always returns the second tab?
选项卡1上的内容独立于选项卡2滚动,但两个选项卡都会触发回调,并始终返回第二个选项卡?
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? 角度世界正在发生什么?
You have declared "tabnumber" as global variable that's why it couldn't be able to support closure . 您已将“tabnumber”声明为全局变量,这就是它无法支持闭包的原因。 define it as local var tabnumber = attrs.tabnumber;
将其定义为local var tabnumber = attrs.tabnumber; it would work fine.
它会工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.