Question

我正在使用Angularstrap的Bs-tabs指令向页面添加标签。我在一个标签内显示树视图。我想向它添加SlimScroll栏。我遇到问题，我无法将Slim Scroll添加到两个tabs.Only rail即将到来，滚动无效

<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
                        }
                );
            }
        }
    })
}

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

1 个答案: