Collection-repeat with custom directive instead ion-item

ionic-v1
1

Hi,

I have a problem when trying to use collection-repeat with a custom directive instead of ion-item.
It basically works ok after a while of try and error. But with my test list of 2 items (also with less or more items) I have the problems that

  1. All items are visible
  2. All items are on top of each other because there is no transform applied to position the items.

Here are some codes:
list:

<ion-list id="ts-list4" class=" manual-list-fullwidth ">
    <ts-preview-large collection-repeat="ts in tss" ts="ts" item-height="160px" item-width="100%"> </ts-preview-large>
 </ion-list>

directive:

     angular.module('app.ts.previews.large')
      .directive('tsPreviewLarge', TsPreviewLargeDirective);

   TsPreviewLargeDirective.$inject = [];
   function TsPreviewLargeDirective(scope, element, attrs) {
      return {
         restrict: 'E',
         replace: false, 
         templateUrl: 'app/ts/previews/large/ts.previews.large.html',
         scope: {
            ts: '='
         }
      };
   }

directive template:

<div class="item item-body ts-preview-large">
    <div class="list card manual-card-fullwidth " ui-sref="app.tabs.ts-details">
        <div class="item item-thumbnail-left item-icon-right ">
            <img src="/img/thumbnail-img.png">
            <span class="time">24.07.16 01:45</span>
            <h2 class="title">{{ts.name}}</h2>
            <p class="author">by {{ts.author}}</p>
        </div>
        <div class="item item-body location-wrapper">
            <i class="icon ion-ios-location"></i>
            <div class="location">....</div>
            <div class="distance">....</div>
        </div>
    </div>
</div>

What am I doing wrong?

Greetings