有没有办法刷新虚拟重复容器？

Question

我有md-virtual-repeat-container处理来自搜索框触发的API调用的数据。我希望当用户输入第二个搜索查询时能够刷新此容器。

我使用类似于来自plnkr的此this question:的设置。唯一的区别是当用户输入搜索词时从服务器获取数据。

我的问题

有没有办法触发刷新md-virtual-repeat-container？

我不认为代码是相关的，但这是我的（简化）生产代码：

    var self = this;
    self.infiniteItems = {
        numLoaded_: 0,
        toLoad_: 0,
        items: [],
        getItemAtIndex: function (index) {
        if (index > this.numLoaded_) {
            this.fetchMoreItems_(index);
                return null;
            }
            return this.items[index];
         },
         getLength: function() {
            return this.numLoaded_ + 25;
         },
         fetchMoreItems_: function (index) { 
             if (this.toLoad_ < index) {
                 this.toLoad_ += 5;
                 var offset = 0;

                 $http({
                     method: 'GET',
                     datatype: 'json',
                     url: '{my-api-call}',
                     contentType: "application/json; charset=utf-8",
                     cache: false,
                     params: {
                         param: query,
                         page: offset
                     }
                  }).then(angular.bind(this, function (obj) {
                     this.items = this.items.concat(obj.data.SearchResults);
                     this.numLoaded_ = this.toLoad_;
                     this.offset++;
                     $scope.searchResults = obj.data.SearchResults;
                  }));
             } 
         }
    };

Answer 1

您可以通过触发伪窗口大小调整事件来强制重绘您的md-virtual-repeat容器（这会导致该指令调用其私有handleScroll_()方法，然后调用containerUpdated()）。

这将触发假窗口调整大小事件：

angular.element(window).triggerHandler('resize');

Answer 2

您还可以使用它来刷新特定范围内的项目，而不是整个文档：

Bitmap

Answer 3

重置模型也应该有效。

在你的情况下你可以在 infiniteItems 上有一个新功能：

refresh : function() {
            this.numLoaded_= 0;
            this.toLoad_ = 0;
            this.items = [];
          }

Answer 4

我要发布我的解决方案，因为还没有答案。如果有更好的答案，我很乐意接受。

首先，我将所有搜索结果代码迁移到自己的模板，指令和控制器中。

下一步，我添加了一个空容器来代替我的逻辑。每次我搜索时，我都会使用它作为动态转储指令的地方。

`<div id="search-result-container"></div>`

最后，我动态添加了我的新指令

$scope.handleHotlineSearchClick = function () {           
    var query = $('#legal-search-input').val();

    if (query != "") {
        $scope.searchLoaded = false;
        $('#search-result-container').empty().append($compile("<search-result></search-result>")($scope));
    }
};

这样，每次用户输入新的搜索词时，都会重新加载该指令。