Load fonts dynamically with md-virtual-repeat

Question

Hello I faced with problem to load fonts dynamically from existing array.

I get all the fonts from google fonts. Then I'm using md-virtual-repeat to render fonts. On each element I use directive rt-font, link function of this directive loads needed font family with Web Font Loader. And here starts the problems. Link function starts loading font not from first element. Some of elements not applying font style correctly, some of them not renders font.name until click on it

I have codepen here. So I assume I have broken logic in part of dynamic font load and render here

vm.infiniteItems = {
  items: [],
  numLoaded_: 0,
  toLoad_: 0,
  maxLen: 810,
  // Required.
  getItemAtIndex: function(index) {
    if (index > this.numLoaded_) {
      this.fetchMoreItems_(index);
      return null;
    }
    return this.items[index];
  },
  // Required.
  getLength: function() {
    return this.numLoaded_ + 5;
  },
  fetchMoreItems_: function(index) {
    if (this.toLoad_ < index) {
      this.toLoad_ += 5;
      if (this.toLoad_ <= this.maxLen){
        var partOfFonts = vm.fonts.slice(this.numLoaded_, this.toLoad_);
        this.items =  this.items.concat(partOfFonts);
        this.numLoaded_ = this.toLoad_;
      }
    }
  }
}

Pls could someone help me to explain the logic of how and in what sequence should I do to: 1) Load fonts from array partially ин 5 elements 2) render them in repeat list and apply their font style correctly. What I missed, maybe I should use deferred loading or...

Answer 1

I found my problems and got rid of md-virtual-repeat. I used fork of angular infinite scroll instead of md-virtual-repeat, because it only affects the html, it just hides and shows DOM elements. I just added limitTo filter on my huge fonts array to avoid overloading of http requests. Same thing used in angular font select. Now my demo font picker works. There is definitely stuff to optimise and refactor but as alfa version it is ok.