Добавление новых данных в результат typeahead при прокрутке

Я использую angular bootstrap typeahead. Я хотел бы добавить функциональность для infinite scroll в том, что для этого я добавил небольшую директиву для функций прокрутки и некоторых изменений в шаблоне typeahead, директива прокрутки работает так, как ожидалось, но typeahead не обновляет представление после того, как результат будет обновлен.

Мой вход подобен:

<input type="text" ng-model="variable" placeholder="Search..." typeahead="obj as obj.text for obj in getObject($viewValue)" typeahead-wait-ms="500" />

шаблон typeahead:

<ul class="dropdown-menu typeahead-custom" ng-scroll="getObject('{{query}}')" ng-scroll-direction="down" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}" should-focus="isActive($index)">
        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
</ul>

и getObject. Функция:

$rootScope.lastResult = [];
$rootScope.getObject = function(str) {
    return  $http({
        url: "someUrl",
        method: "post",
        headers: {'Content-Type': 'application/json'},
        data: {str: str, page_limit: 10}
    }).then(function(response) {
        $.merge($rootScope.lastResult, response.data.data);
        return $rootScope.lastResult;
    });
};

когда я печатаю что-то в вводе typeahead, он работает нормально, но когда я просматриваю шаблон typeahead, он вызывает функцию и обновляет переменную lastResult, но не обновляет элемент DOM typeahead.

Любая помощь? Пожалуйста....

Ответ 1

Пожалуйста, попробуйте это!

$rootScope.lastResult = [];
$rootScope.getObject = function(str) {
    return  $http({
        url: "someUrl",
        method: "post",
        headers: {'Content-Type': 'application/json'},
        data: {str: str, page_limit: 10}
    }).then(function(response) {
        $rootScope.$apply(function(){
         $.merge($rootScope.lastResult, response.data.data);
        });
        return $rootScope.lastResult;
    });
};

Ответ 2

Я написал что-то подобное, но вместо того, чтобы использовать прокрутку, была нажата кнопка.

UI Bootstrap не раскрывает никакого API их директив и как таковой я должен был расширить свой шаблон и добавить дополнительный контроллер через директиву, которая будет манипулировать данными, отправленными в директиву типа впереди.

Короче говоря, это было грязно, и я рекомендовал бы попробовать найти другую библиотеку для функции ввода вперед, кроме UI Bootstrap.

Ответ 3

проверьте, являетесь ли вы обязательной переменной корневого кода или области видимости. после любого изменения сферы или корнеплодов просто примените его так же, как $scope.apply(). поэтому он вызовет $apply/$digest внутренне и отразит его в пользовательском интерфейсе.

Ответ 4

Чтобы заставить это работать, мне пришлось отредактировать исходный исходный код пользовательского интерфейса, добавив прослушиватель событий в UibTypeaheadController. Выше функции getMatchesAsync:

originalScope.$on('loadMore', function() {
  hasFocus = true;
  getMatchesAsync(modelCtrl.$viewValue);
});

Когда пользователь прокручивается вниз, я выделяю нагрузку больше области событий. $emit ('loadMore'). Это позволяет обновлять список совпадений в прокрутке.