ng-class for ui-scroll

by Marty Spallone

HTML

<script src="https://code.angularjs.org/1.3.14/angular.js "></script>
<div ng-controller="MainController">
 <h2>
		Irregular list item height is {{useIrregularHeight ? 'enabled' : 'disabled'}}
		<a class="toggler" ng-click="useIrregularHeight = !useIrregularHeight;">[toggle]</a>
	</h2> <span>Example  get: function(descriptor, success) with items ranging from 50-300 descending to simulate a feed data source.  
  
  This repro shows the new padding branch  <a href="https://github.com/angular-ui/ui-scroll/blob/paddings/src/ui-scroll.js">link</a> that uses cache of item heights and appears to completely address the problem from here <a href="https://jsfiddle.net/MartyBolton/s38zdu8c/6/">problem</a>
 

  <ul ui-scroll-viewport class="list">
    <li ui-scroll="item in datasource" buffer-size="15" ng-class="{'odd': item.id % 2}" style="height:{{useIrregularHeight ? item.size + 22 : 50}}px;">
      <span>{{item.text}}</span>
    </li>
  </ul>
</div>

CSS

.odd {
  color: red;
}

.list {
  height: auto !important;
  position: absolute;
  top: 120px;
  bottom: 20px;
  left: 0;
  right: 0;
  overflow: auto;
  font-size: 1.5em;
  background-color: #F3F3F3;
  color: black;
}

JavaScript

/*!
 * angular-ui-scroll
 * https://github.com/angular-ui/ui-scroll.git
 * Version: 1.3.3 -- 2016-03-02T14:02:47.867Z
 * License: MIT
 */
 

 (function () {
'use strict';
angular.module('ui.scroll.jqlite', ['ui.scroll']).service('jqLiteExtras', [
  '$log', '$window', function(console, window) {
    return {
      registerFor: function(element) {
        var convertToPx, css, getMeasurements, getStyle, getWidthHeight, isWindow, scrollTo;
        css = angular.element.prototype.css;
        element.prototype.css = function(name, value) {
          var elem, self;
          self = this;
          elem = self[0];
          if (!(!elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style)) {
            return css.call(self, name, value);
          }
        };
        isWindow = function(obj) {
          return obj && obj.document && obj.location && obj.alert && obj.setInterval;
        };
        scrollTo = function(self, direction, value) {
          var elem, method, preserve, prop, ref;
          elem = self[0];
          ref = {
            top: ['scrollTop', 'pageYOffset', 'scrollLeft'],
            left: ['scrollLeft', 'pageXOffset', 'scrollTop']
          }[direction], method = ref[0], prop = ref[1], preserve = ref[2];
          if (isWindow(elem)) {
            if (angular.isDefined(value)) {
              return elem.scrollTo(self[preserve].call(self), value);
            } else {
              if (prop in elem) {
                return elem[prop];
              } else {
                return elem.document.documentElement[method];
              }
            }
          } else {
            if (angular.isDefined(value)) {
              return elem[method] = value;
            } else {
              return elem[method];
            }
          }
        };
        if (window.getComputedStyle) {
          getStyle = function(elem) {
            return window.getComputedStyle(elem, null);
          };
          convertToPx = function(elem, value) {
  ...