Javascript &引用；完美滚动条“；（jQuery插件）isn'；当its容器中充满Angular.js时，t已正确初始化

在我的页面上，我使用Angular.js从json文件以编程方式生成了一个食品/饮料菜单。问题在于用于滚动角度生成内容的“”，这似乎需要在这些菜单上初始化滚轮事件。这使得在没有滚轮的设备上无法滚动。除了角度生成的内容，其他页面正确初始化完美的滚动条。这给了我一个线索，问题可能出在jQuery世界（perfect scrollbar是jQuery插件）和Angular世界之间的交互上。
该网站是-导航到“食物”和“饮料”以查看实际问题-除非使用鼠标滚轮，否则无法滚动内容（不会出现完美的滚动条）。
我已经写了这个小指令：

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

mainMenuApp.directive（'scrollBar'，function（）{
返回{
限制：“C”，
模板：“”，
是的，
作用域：{}，
链接：函数（范围、元素、属性）{
$（元素）.perfectScrollbar（）；
//元素。perfectScrollbar（）；-不起作用
//angular.element（element）.perfectScrollbar（）；-不工作
}
}
});

通过angular为两个菜单提供“完美滚动条”，但这并没有解决问题。
如何使完美的滚动条完美地与角度（双关语：）配合使用？
感谢您抽出时间。
干杯

---

Jared

在执行链接函数时，您的menu-food.json和menu-drink.json尚未到达，并且perfectScrollbar需要在数据到达时进行更新，调用：

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

---

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

我在使用时遇到了相同的问题-以下“附加指令”解决了此问题：

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

mainMenuApp.directive（'scrollBar'，function（）{
返回{
限制：“A”，
模板：“”，
是的，
作用域：{}，
链接：函数（范围、元素、属性）{
元素。perfectScrollbar（）；
元素绑定（“鼠标悬停”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
元素。perfectScrollbar（'update'）；
}); 
}
}
});

在我的例子中，在JQuery和Perfect Scrollbar脚本文件之前加载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、Perfect Scrollbar，然后再加载AngularJS。

我可以在Mac OSX上滚动Chrome 34，使用Perfect Scrollbar（我猜是带有橙色箭头的滚动条）不会有问题。你在哪种浏览器中试用过它？它在Chrome和Firefox 28中对我有效。用我的笔记本电脑触摸板和鼠标滚轮工作。做到了。我以为这会是一个问题，以前尝试过使用“更新”，但现在我意识到我试图同步进行，这当然不起作用。谢谢。一个问题：我如何确保在所有ng重复完成后广播事件？简单方法：让您的事件侦听器设置一个标志，并让您的指令监视该标志。更长但更好的方法：通过指令实现控制器通信。