5

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

我正在使用类似于来自这个问题的这个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;
                  }));
             } 
         }
    };
4

4 回答 4

12

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

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

angular.element(window).triggerHandler('resize');
于 2016-06-24T16:16:52.423 回答
3

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

scope.$broadcast('$md-resize')
于 2016-08-29T11:16:51.523 回答
2

重置模型也应该有效。

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

refresh : function() {
            this.numLoaded_= 0;
            this.toLoad_ = 0;
            this.items = [];
          }
于 2016-10-17T17:41:51.900 回答
0

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

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

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

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

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

于 2016-01-21T19:44:47.313 回答