当its容器被Angular.js填充时，"perfect-scrollbar“(jQuery插件)不能正确初始化

Question

在我的页面上，我使用Angular.js从json文件以编程方式生成食物/饮料菜单。问题出在用于滚动角度生成的内容的"perfect-scrollbar“，它似乎需要在这些菜单上初始化滚轮事件。这使得在没有滚轮的情况下无法在设备上滚动。除了角度生成的内容之外，其他页面正确地初始化了perfect-scrollbar。这给了我一个线索，问题可能出在jQuery世界(perfect-scrollbar是一个jQuery插件)和Angular世界之间的交互上。

该站点是themockingbird.co.uk的-导航到“食物”和“饮料”来查看实际问题-不能滚动内容(完美滚动条不会出现)，除非使用鼠标滚轮。

我写了这个小指令：

mainMenuApp.directive('scrollBar', function(){
    return {
        restrict: 'C',
        template: '<div ng-transclude></div>',
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){
            $(element).perfectScrollbar();
            //element.perfectScrollbar(); - doesn't work
            //angular.element(element).perfectScrollbar(); - doesn't work
        }
    }
});

以方便“完美滚动条”通过角度为两个菜单，但这并没有解决问题。

怎样才能让perfect-scrollbar在angular (双关语:)中完美工作？

非常感谢您抽出时间来。

干杯

贾里德

Answer 1

在执行链接函数时，您的menu-food.json和menu-DINK.JSON还没有到达，perfectScrollbar需要在数据到达时进行更新，方法是：

$(element).perfectScrollbar('update');

由于您没有用于在指令附加的控制器中将食品和饮料列表作为解耦的可观察值来处理的体系结构，因此您可以简单地广播来自根作用域的事件，由您的指令链接函数侦听，从而在适当的时候更新perfectScrollbar实例。

Answer 2

我在使用https://github.com/itsdrewmiller/angular-perfect-scrollbar的时候也遇到了同样的问题--下面的“附加指令”解决了这个问题：

.directive('psMouseOver', function () {    
    return {       
        link: function(scope, element) {
            element.bind("mouseover", function(e){
                e.stopPropagation();
                e.preventDefault();    
                element.perfectScrollbar('update');
            });   
        }
    }
});

然而，在您的示例中，只需添加这些行，并将您的指令编写为：

mainMenuApp.directive('scrollBar', function(){
    return {
        restrict: 'A',
        template: '<div ng-transclude></div>',
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){
            element.perfectScrollbar();
            element.bind("mouseover", function(e){
                e.stopPropagation();
                e.preventDefault();    
                element.perfectScrollbar('update');
            }); 
        }
    }
});

Answer 3

在我的例子中，当JQuery和完美的滚动条脚本文件包含之前加载的Angular.js文件时就会发生这种情况。

<script src="assets/libs/jquery.min.js"></script>
<script src="assets/libs/jquery.mousewheel.js"></script>
<script src="assets/libs/perfect-scrollbar.js"></script>

试着先加载JQuery，完美的滚动条，然后再加载AngularJS。