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

Question

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

我正在使用与此类似的设置 plnkr which is from 。唯一的区别是它在用户输入搜索词时从服务器获取数据。

我的问题

有没有办法触发刷新 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

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

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

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

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

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

Answer 2

您可以通过触发伪造的 window 调整大小事件（这会导致指令调用其私有 handleScroll_() 方法，然后调用 containerUpdated()).

这将触发一个假的 window 调整大小事件：

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

Answer 3

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

scope.$broadcast('$md-resize')

Answer 4

重置模型也应该有效。

在你的情况下，你可以在 infiniteItems 上有一个新函数：

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

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

Is there a way to refresh virtual repeat container?

angularjs

angularjs-material

我的问题