带有 $http 请求的 Angular Material 自动完成无限滚动答案

【问题标题】：Angular Material autocomplete infinite scroll with $http request带有 $http 请求的 Angular Material 自动完成无限滚动
【发布时间】：2017-04-16 03:52:16
【问题描述】：

自动完成功能是否支持从远程源无限滚动？场景是这样的。用户键入几个字母，自动完成过滤掉结果。结果仍然太大而无法放入结果区域。用户想要滚动“返回结果”。我发现这种情况非常简单，但是我在网上一无所获。

请指教。

【问题讨论】：

标签： angularjs autocomplete angular-material

【解决方案1】：

我想我们需要根据您的要求使用自定义指令。

我创建了指令，该指令实际上在“md-virtual-repeat-container”上绑定滚动事件，该指令在渲染后保存项目列表。

您的指令将如下所示。该指令的目的是在用户到达滚动结束时获取滚动事件并调用附加函数。条件“new Date().getTime() - now > 100”将充当节流 API 调用。如果您想将 API 调用限制在 100 毫秒的用户操作之间，您可以将节流时间从 100 毫秒更改为任意毫秒。

.directive('lazyLoadData', function($compile) {
     return {
         link: function(scope, el, attrs) {
            var now = new Date().getTime();
            var rep = angular.element(document.getElementsByClassName("md-virtual-repeat-scroller"));
            rep.on('scroll', function(evt){
               if (rep[0].scrollTop + rep[0].offsetHeight >= rep[0].scrollHeight)
                  if (new Date().getTime() - now > 1000) {                  
                     now = new Date().getTime();
                     scope.$apply(function() { 
                        scope.$eval(attrs.lazyLoadData); 
                     });
                  }                  
            });
         }
    }; 
});

HTML 您的 html 如下所示，

<md-autocomplete flex
                 md-selected-item="ctrl.selectedItem"
                 md-search-text="searchText"
                 md-items="item in querySearch(searchText)"
                 md-item-text="item.login"
                 md-delay="300"
                 md-floating-label="Search Github Users"
                 lazy-load-data="querySearch()" <!--New directive will go here -->
>
   <div layout="row" class="item" layout-align="start center">
      <img ng-src="{{item.avatar_url}}" class="avatar" />
      &nbsp;&nbsp;
      <span md-highlight-text="searchText">{{item.login}}</span>  
   </div>
</md-autocomplete>

这里是DEMO

*请注意目前我正在将相同的数据附加到我的记录数组中，因为我没有实际的 API。但是您可以扩展您的 API 以根据搜索到的文本获取分页记录。参考https://github.com/davidchin/angular-endless-scroll 或 http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html

【讨论】：

我将 md-autocomplete 包装在一个指令中，并在一页中有多个指令。有一次，我对任何一个元素进行无限滚动，它也会触发对所有其他指令的查询搜索。在lazyLoadDirective中，我尝试了这个，但徒劳无功： var rep = $(".md-virtual-repeat-container").not('.ng-hide').find('.md-virtual-repeat-scroller ');上面的基本思想：只需触发重复滚动可见的延迟加载。有人可以指导我

【解决方案2】：

根据user3249448的回答，我做了一些改进，可以通过参数传递element class和load function。

.directive('scrollDetector', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                let e = element;
                if (attrs.scrollDetectorElementClass) {
                    e = angular.element(document.getElementsByClassName(attrs.scrollDetectorElementClass)); 
                }
                var raw = e[0];
                e.bind('scroll', function () {
                    if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                        scope.$apply(attrs.scrollDetector);
                    }
                });
            }
        };
    });

和html

<md-autocomplete flex
             md-selected-item="ctrl.selectedItem"
             md-search-text="searchText"
             md-items="item in querySearch(searchText)"
             md-item-text="item.login"
             md-delay="300"
             md-floating-label="Search Github Users"
             lazy-load-data="querySearch()"
             scroll-detector="controller.function()"
             scroll-detector-element-class="md-virtual-repeat-scroller"
>
   <div layout="row" class="item" layout-align="start center">
      <img ng-src="{{item.avatar_url}}" class="avatar" />
      &nbsp;&nbsp;
      <span md-highlight-text="searchText">{{item.login}}</span>  
   </div>
</md-autocomplete>

【讨论】：