angular directive实现触底加载效果一则

核心javascript代码:
.directive('ngMouseWheelDownNextPage', function () {
    return function (scope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel", function (event) {

            // cross-browser wheel delta
            var event = window.event || event; // old IE support
            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
            //mouse wheel down event
            if (delta < 0) {
               if(attrs.$$element[0].scrollTop>0 && (attrs.$$element[0].offsetHeight + attrs.$$element[0].scrollTop >
                  50 + document.querySelectorAll('ul.log-content')[0].offsetHeight)){
                  scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelDownNextPage);
                  });
                  // for IE
                  event.returnValue = false;
                  // for Chrome and Firefox
                  if (event.preventDefault) {
                      event.preventDefault();
                  }
               }

            }
        });
    };
})
核心html:

<div class="log-panel" ng-mouse-wheel-down-next-page="model.nextPage()">
    <div>
        <ul class="log-content">
            <li data-ng-repeat="log in model.logs.items track by log.offset" class="log-panel-row">
                <span>{$ log.log $}</span>
            </li>
        </ul>
        <span class="log-load-button"
              data-ng-show="model.logs.isLoading&&model.logs.canBeTriggered">{$ model.context.log.isLoading $}</span>
        <span class="log-load-button"
              data-ng-show="model.logs.items.length == 0&&model.logs.isRequestFinish&&!(model.logs.isLoading&&model.logs.canBeTriggered)">
            {$ model.context.log.noLogs $}
        </span>
        <a class="log-load-button" href="javascript:;"
           ng-show="!(model.logs.items.length == 0&&model.logs.isRequestFinish)&&(model.logs.isRequestFinish&&model.logs.hasMorePage&&model.logs.canBeTriggered)"
           ng-click="model.nextPage()">{$ model.context.log.scrollTips $}</a>

    </div>
</div>
代码解读:
log-panel是有滚动条的div log-content是div内的内容, 核心思想是log-panel scrollTop+ log-panel height>=log-content height + 一定的偏移量, 就 触发下拉加载事件