将多个自定义指令应用于AngularJS中的相同HTML标签

Question

如何使用AngularJS将多个自定义指令分配给同一标签？

我的代码类似于以下内容：

<div id="fixed" when-scrolled-up="loadMoreUp()" when-scrolled-down="loadMoreDown()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

此处，未触发loadMoreDown（）函数。 （这应该在用户向下滚动时触发）。 以下是指令的定义：

angular.module('scroll', []).directive('whenScrolledDown', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolledDown);
            }
        });
    };
});

我在此处粘贴了完整的代码： http : //plnkr.co/edit/Pn9F2GuJvvkpnXD43km9?p=preview 。

该代码应实现反向无限滚动。 我在这里做错了什么？

Answer 1

您的示例的问题是您执行了两次模块代码：

// create a new module 'scroll' ...
// and add a directive 'whenScrolledDown'
angular.module('scroll', []).directive('whenScrolledDown', ...)

// create a new module 'scroll' ...
// and add a directive 'whenScrolledUp'
angular.module('scroll', []).directive('whenScrolledUp', ...)

由于清除了该模块，因此不再存在第一个指令whenScrolledDown 。 向同一模块添加另一个指令的正确方法是：

// without the second parameter
angular.module('scroll').directive('whenScrolledUp', ...)

// or
var module = angular.module('scroll', [])

module.directive('whenScrolledDown', ...)
module.directive('whenScrolledUp', ...)