【ionic】collection-repeatで行の高さを動的にする

まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。

テンプレート

<ion-content>
  <ion-list>
    <ion-item class="item-text-wrap item-remove-animate item-avatar item-icon-right"
              ng-repeat="item in items"
              item-height="getHeight(item)">
      <img ng-src="{{item.face}}">
      <h2>{{item.name}}</h2>
      <p>{{item.lastText}}</p>
    </ion-item>

    ・・・

  </ion-list>                                                                                                                                                                                                      

  <!-- 計算用に準備 -->
  <ion-item class="item-text-wrap item-remove-animate item-avatar item-icon-right"
            id="calculateItem">
    <img ng-src="">
    <h2></h2>
    <p></p>
  </ion-item>
</ion-content>

コントローラ

// 計算用DOM
var calculateItem = document.getElementById("calculateItem");

// 計算用DOMに値を入れて高さを計算して返す
$scope.getHeight = function(item) {
  var h2 = dummy.getElementsByTagName('h2')[0];
  var p = dummy.getElementsByTagName('p')[0];
  h2.textContent = item.name;
  p.textContent = item.lastText;
  return dummy.clientHeight;
};

とりあえずこれで動いた。collection-repeatの方がパフォーマンスが良いとかこのやりかたでパフォーマンスがよいかとかまではまだ調べられていない。以上です。