javascript - 如何将spyMargin与ng-scrollable一起使用

Question

我在 uib-popover 中使用 ng-scrollable 指令。我想使用spyMargin 设置，以便能够在滚动条到达某个点时加载更多项目，就像 facebook 对其通知所做的那样。

这是我使用该指令的方式:

<div class="scrollable-container" ng-scrollable="{scrollX:'none',scrollY:'right', spyMargin: 0.75}">

据我所知，您可以将spyMargin 设置为0 到1 之间的值，具体取决于您希望在何处发出事件。在 Controller 中，我按照文档中的描述监听可滚动.spybottom 事件，然后打印到控制台以查看它是否正常工作。

$scope.$on('scrollable.spybottom', function (e, contentTop, id) {
    console.log("Near the bottom!");
});

但是，没有任何内容输出到控制台，所以显然我做错了什么。这是 ng-scrollable 主页的链接:https://github.com/echa/ng-scrollable

我还创建了一个 plnkr 来显示这是如何不起作用的:https://plnkr.co/edit/q6Fdtpjb697SISW8oyHP?p=preview

Answer 1

好吧，你做得很好。问题位于ng-scrollable本身。我检查了源代码，发现该库中有很多模式错误和错误的 AngularJS 行为。问题取决于 AngularJS 指令的隔离范围行为。请看看这个plnkr我修复了 ng-scrollable 的错误 $broadcasting 处理。查看文件 ng-scrollable.min.js 行 264 到 274。

这对你有用，但最好在 GitHub ng-scrollable 上提出拉取请求。 .

// fire scrollSpy events only when entering a margin
if (contentTop < containerHeight * config.spyMargin && oldTop >= containerHeight * config.spyMargin) {
  $scope.$emit('scrollable.spytop', contentTop, config.id);
}
if (contentTop > contentHeight - containerHeight * (config.spyMargin + 1) && oldTop <= contentHeight - containerHeight * (config.spyMargin + 1)) {
  $scope.$emit('scrollable.spybottom', contentTop, config.id);
}
if (contentLeft < containerWidth * config.spyMargin && oldLeft >= containerWidth * config.spyMargin) {
  $scope.$emit('scrollable.spyleft', contentLeft, config.id);
}
if (contentLeft > contentWidth - containerWidth * (config.spyMargin + 1) && oldLeft <= contentWidth - containerWidth * (config.spyMargin + 1)) {
  $scope.$emit('scrollable.spyright', contentLeft, config.id);
}

修复后，您终于能够在 AngularJS Controller 内监听 $broadcast 事件:

// Code goes here
var myModule = angular.module('myModule', ["ui.bootstrap", "ngScrollable"]);

myModule.controller('myController', function($scope, $rootScope, $timeout) {

    //we listen here to see if the scroll-bar spybottom is working
    $scope.$on('scrollable.spybottom', function (e, contentTop, id) {
        console.log("Near the bottom!");
    }); 
});