angularjs - AngularStrap bs 选项卡 + 将 slimscroll 添加到选项卡

Question

我正在使用 Angularstrap 的 Bs-tabs 指令向页面添加选项卡。我在一个选项卡内显示树视图。我想向其中添加 SlimScroll 栏。我面临的问题是我无法将 Slim Scroll 添加到两个选项卡。仅铁路来了，滚动不起作用

<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>

Answer 1

我遇到的一件事是，使用指令来操作内容和附加 jQuery 插件是一种更复杂且更通用的方法。

当我现在面临这个问题时，这是我的（浏览过的）指令：

/**
 * A slimscroll.js directive
 *
 * Requires Slimscroll.js
 *
 * @type {exports}
 */
exports = module.exports = function (ngModule) {
    ngModule.directive('slimscroll', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                height = angular.element(element).css('height');
                angular.element(element).slimScroll(
                        {
                            size: '7px',
                            color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#a1b2bd'),
                            railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#333'),
                            position: 'right',
                            height: height,
                            alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
                            railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
                            disableFadeOut: true
                        }
                );
            }
        }
    })
}