0

在我的页面上，我使用 Angular.js 从 json 文件以编程方式生成食物/饮料菜单。问题在于用于滚动角度生成内容的“完美滚动条”，这似乎需要滚动轮事件才能在这些菜单上进行初始化。这使得在没有滚轮的设备上滚动是不可能的。除了角度生成的内容外，其他页面正确初始化完美滚动条。这给了我一个线索，即问题可能在于 jQuery 世界（完美滚动条是一个 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
        }
    }
});

通过角度来促进两个菜单的“完美滚动条”，但这并没有解决问题。
我怎样才能使完美的滚动条与角度完美地工作（双关语:)？
我很感激你的时间。
干杯
杰瑞德

4

3 回答 3

1

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

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

由于您没有将食物和饮料列表作为指令附加的控制器中的解耦可观察值来处理的体系结构，因此您可以简单地从根范围广播一个事件，由您的指令链接函数监听，从而更新右侧的perfectScrollbar实例片刻。

于 2014-04-24T21:41:20.440 回答
1

我在使用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');
            }); 
        }
    }
});
于 2015-03-20T00:46:12.907 回答
0

在我的情况下，当 Angular.js 文件在 JQuery 和 Perfect Scrollbar 脚本文件包含之前加载时，就会发生这种情况。

<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 之后加载。

于 2017-01-16T08:16:37.787 回答