Is there a way to update a virtual replay container?

Question

I have md-virtual-repeat-containerone that processes data from an API call called by a search box. I would like to update this container when the user enters a second search query.

I use setting like this plnkr , which is in this issue: . The only difference is getting data from the server when a user enters a search query.

My question

Is there a way to trigger an update md-virtual-repeat-container?

---

I don't think the code matters, but here is my (simplified) production code:

    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

, , :

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

Answer 3

.

:

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

Answer 4

, . , .

First , I transferred all the code for the search result to my own template, directive, and controller.

Next , I added an empty container instead of my logic. I will use this as a place to dynamically output my directive every time I search.

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

Finally , I dynamically added a new directive similar to this

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

Thus, each time the user enters a new search query, the directive is reloaded.