javascript - 在 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', ...)