如何向UI-Bootstrap Typeahead Directive添加分页

Question

我有一个Angular项目并使用UI-Bootstrap的Typeahead指令。

问题在于，当使用typeahead指令处理大量类似数据时，我发现显示前x个结果数可能不足以满足所有用户的要求，反之，它太慢了。显示所有结果是不切实际的。

我们的想法是在typeahead控件的弹出窗口内提供一个分页机制，同时仍保留所有现有功能。

如何在仍然使用typeahead指令的情况下解决这个问题？

Answer 1

通过使用 $ provide.decorator ，您可以更改指令使用的HTML，以满足您自己的需要，而无需更改指令的工作方式。

执行以下操作：

1. 下载最新版本的UI-Bootstrap here并找到您要覆盖的指令以及它使用的html。 （在这种情况下，如果您使用的是最新版本，则为typeaheadPopup - 或uibTypeaheadPopup）

2. 复制指令使用的html字符串并根据需要进行更改。在这个例子中，让它使用以下html :(我将我的预先限制为8个结果，但你可以改变它）

   <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
       <li style="border-bottom: solid 1px lightgray" class="customFadeAnimate" ng-repeat="match in matches | startFrom:(currentPage*8)-8 | limitTo: 8 track by $index "
   ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
       <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
       </li>
       <div ng-click="$event.stopPropagation()" ng-hide="matches.length - 8 < 1" style="text-align:center;margin: 5px;color: #808080;min-width:250px">
           <span> {{((currentPage || 1)*8)-8+1}} to {{((currentPage || 1)*8 > matches.length) ? matches.length : (currentPage || 1)*8}} of {{matches.length}}     </span>
           <pager style="margin-top:-20px;margin-bottom:4px" total-items="matches.length" ng-model="currentPage" items-per-page="8" align="true" previous-text="Prev" next-text="Next"></pager>
       </div>
   </ul>
   

3. 创建装饰器模块以使用您自己的：

   覆盖现有指令的html模板

   (function () {
       'use strict';
   
       angular.module('app.decorators', ['ui.bootstrap'])
     .config(['$provide', Decorate]);
   
       function Decorate($provide) {
           $provide.decorator('typeaheadPopupDirective', function ($delegate) {
               var directive = $delegate[0];
   
               directive.templateUrl = "app/customTemplates/typeAheadPopup.html";
   
               return $delegate;
           });
       }
   })();
   

我已经为此图片使用了模板功能 - 但您应该获得类似的结果：



注意：您需要使用“指令”一词附加要更改的指令的名称。您还需要确保在ui-bootstrap模块之后引用您创建的装饰器模块，以使模板生效。

我使用了以下stackoverflow答案作为参考：SO Reference