Replacing ion-item with a directive

ionic-v1
1

I wrote a simple directive that defines an item for an ion-list. It simply inserts a pre-cofigured ion-item for each element in an array (based on the ng-repeat defined for the ion-list).

It looks something like this:

<ion-list ng-repeat="item in scheduleItems | orderBy:dateSort:true">
    <schedule-item item="item" on-select="selectScheduleItem(item)"></schedule-item>
</ion-list>

When I test in a desktop browser (Chrome, Safari) it works as expected, but when it runs on the iPhone (iOS 8) none of the list elements are rendered.

If I change the definition of the directive so that the directive can be used as an attribute on ion-item, then I get an empty ion-item rendered for each element (the contents that should be inserted by the directive do not show up). This is what it looks like:

 <ion-list ng-repeat="item in scheduleItems | orderBy:dateSort:true">
     <ion-item schedule-item item="item" on-select="selectScheduleItem(item)" class="item-thumbnail-left" ng-click="selectScheduleItem(item)"></ion-item>
 </ion-list>

Again, this only happens on the iPhone, not when run in a browser.

Is this a limitation of ion-list and ion-item? It’s odd that it works when run in a desktop browser on my Mac but will not render when run on the iPhone.

2

Hmm, can you provide a codepen for this. I can check it out on an actual device and see what the issue is

3

I figured out what the problem is. In the directive I had:

templateUrl: "/templates/schedule/schedule-item.html",

This works fine in the desktop web browser; however to get it to work in on the device I had to change it to:

templateUrl: "templates/schedule/schedule-item.html",

Note the leading “/” needed to be removed to get it to work on the device.

1 Like
4

How did you get this to work with the angular compiler? I can only get my directive to compile if the templateUrl is relative to the directory.

But if I make it relative, then I have the issue of nothing being rendered in my ion-item

5

Oh never mind, this thread is two years old and for ionic v1