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

【问题标题】：Is there a way to refresh virtual repeat container?有没有办法刷新虚拟重复容器？
【发布时间】：2016-04-27 00:19:38
【问题描述】：

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

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

我的问题

有没有办法触发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;
                  }));
             } 
         }
    };

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

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

这将触发一个虚假的窗口调整大小事件：

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

【讨论】：

我会试一试，如果成功我会选择你的答案作为解决方案。谢谢
最后是一个很好的答案，老实说希望有一个更清洁的解决方案，在我的情况下，我不得不包装 $timeout 以等待标签完成更改然后重新绘制
你刚刚保存了我的 $#！ ^^.

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

重置模型也应该可以。

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

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

【讨论】：

【解决方案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));
    }
};

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

【讨论】：