Hinzufügen neuer Daten zu typeahead Ergebnis auf Bildlauf

Question

Ich verwende angular bootstrap typeahead. Ich möchte eine Funktionalität für infinite scroll darin hinzufügen, dass ich eine kleine Direktive für Scroll-Funktionalität und einige Änderungen in typeahead Vorlage hinzugefügt haben, funktioniert Scroll-Direktive wie erwartet, aber Typahead nicht aktualisieren eine Ansicht nach dem Ergebnis ist Update.

Meine Eingabe ist wie:

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

typeahead Vorlage:

<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> 

und getObject Funktion:

$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; 
    }); 
}; 

, wenn ich etwas in typeahead input type es funktioniert fein , aber wenn ich in die typeahead Vorlage scrolle, ruft sie eine Funktion auf und aktualisiert Variable, aber aktualisiert ein DOM-Element von typeahead nicht.

Irgendwelche Hilfe? Bitte ....

Answer 1

Ich hatte etwas ähnliches geschrieben, aber anstatt mit scrollen, gab es eine Schaltfläche, die angeklickt wurde.

UI Bootstrap stellt keine API ihrer Direktiven zur Verfügung und als solche musste ich ihre Vorlage erweitern und einen zusätzlichen Controller über eine Direktive hinzufügen, die die Daten manipuliert, wie sie an die Type Ahead Direktive gesendet werden.

Kurz gesagt, es war schmutzig, und ich würde empfehlen, zu versuchen, eine andere Bibliothek für Typ Ahead-Funktionalität als UI Bootstrap zu finden.

Answer 2

Überprüfen Sie, ob Sie eine Variable von Rootscope oder Scope binden. nach jeder Änderung im Bereich oder Rootscope nur wie $ scope.apply() anwenden. Also wird $ $ apply/$ digest intern aufgerufen und in der Benutzeroberfläche angezeigt.

Answer 3

Bitte versuchen Sie dieses!

$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; 
    }); 
}; 

Answer 4

diese Arbeit zu bekommen, hatte ich die UI-Bootstrap-Quelle zu bearbeiten, einen Ereignis-Listener zum UibTypeaheadController hinzufügen. Oberhalb der getMatchesAsync Funktion:.

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

Wenn der Benutzer scrollt nach unten, ich emittieren die Last mehr Ereignis Umfang emittieren $ (‚loadMore‘). Dadurch kann die Liste der Übereinstimmungen beim Scrollen aktualisiert werden.