ui-scroll [TypeError: Cannot read property 'length' of null] when leaving the view with the scroll

[franky-continu]

Hi guys, I am amazed to have found your repo but I am having this issue with angular 1.4.0 and ui-utils.

The error is that whenever I leave (Back button, or route change) the page/view where I have the ui-scroll i get the following error.

TypeError: Cannot read property 'length' of null
    at JQLite.(anonymous function)

This is reallly a prelimenary trial code.

I'm inside a directive called explorerGrid and has the following loading and datasource objects (functions)

        self.load = function (callback) {
          $q.all([explorer.articles(self.pagination).$promise, explorer.media(self.pagination).$promise, explorer.events(self.pagination).$promise, explorer.tracks(self.pagination).$promise]).then(function (data) {
            self.tiles = self.tiles.concat(data[0], data[1], data[2], data[3]);
            if (callback && typeof callback === 'function') {
              callback();
            }
          });
        };
        self.dataSource = {
          isLoading: false,
          get: function (index, count, success) {
            console.log('datasource.get', index, count);
            if (index + count <= self.tiles.length) {
              var result = self.tiles.slice(index, index + count);
              console.log('datasource.get returning', result);
              success(result);
              return;
            }
            self.pagination.page++;
            self.load(function () {
              var result = self.tiles.slice(index, index + count);
              console.log('datasource.load & get returning', result);
              success(result);
            });
            return [];
          }
        };

The directive's html looks like this:

<div class="ui fluid segment" ng-class="{loading: explorer.datasource.isLoading}">
  <div class="ui stackable grid">
    <div ui-scroll-viewport class="four column row" style="max-height: 800px;">
      <div ui-scroll="tile in explorer.dataSource" class="column" buffer-size="30" padding="2" is-loading="explorer.datasource.isLoading">
        <div class="ui fluid card">
          <div class="image">
            <img ng-src="{{explorer.image(tile)}}" class="ui medium image">
          </div>
          <div class="content">
            <a class="header">{{tile.title|| tile.name || 'Title';}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

It works really good, only when I leave the view it throws that error from this function

   /**
   * chaining functions
   */
  JQLite.prototype[name] = function(arg1, arg2, arg3) {
    var value;
    // extra comment     v    <<-- That v indicates the error this === null 
    for (var i = 0, ii = this.length; i < ii; i++) {
      if (isUndefined(value)) {
        value = fn(this[i], arg1, arg2, arg3);
        if (isDefined(value)) {
          // any function which returns a value needs to be wrapped
          value = jqLite(value);
        }
      } else {
        jqLiteAddNodes(value, fn(this[i], arg1, arg2, arg3));
      }
    }
    return isDefined(value) ? value : this;
  };

[franky-continu]

I solved this issue by just adding 'ui.scroll' and 'ui.scroll.jqlite' as the module dependency instead of 'ui.utils'.

[PowerKiKi]

Actual code base of ui-scroll is in https://github.com/Hill30/NGScroller. Please re-submit your issue over there if needed.