Question

我正在使用angular bootstrap typeahead。我想为infinite scroll添加一个功能，因为我已经添加了一个滚动功能的小指令和typeahead模板中的一些更改，滚动指令按预期工作，但是预先输入后不更新视图结果是更新。

我的意见如下：

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

预先模板：

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

有任何帮助吗？请....

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

Answer 2

我写了类似的东西，但没有使用滚动，有一个点击的按钮。

UI Bootstrap不公开其指令的任何API，因此我需要扩展其模板，并通过指令添加一个额外的控制器，该指令将操作发送到type ahead指令的数据。

简而言之，它很脏，我建议尝试寻找除UI Bootstrap之外的其他类型的提前输入功能库。

Answer 3

检查你是否是rootcope或范围的绑定变量。在范围或rootcope的任何更改之后，只需像$ scope.apply（）一样应用它。所以它会在内部调用$ apply / $ digest并在UI中反映它。

Answer 4

为了实现这一点，我必须编辑UI引导源，向UibTypeaheadController添加一个事件监听器。在getMatchesAsync函数上方：

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

当用户滚动到底部时，我会发出更多的事件范围。$ emit（＆＃39; loadMore＆＃39;）。这允许在滚动时更新匹配列表。

在滚动时将新数据添加到预先输出结果

4 个答案: