My customized reusable directive is hidden when the app launched, but suddenly emerge when the window of browser resized

ionic-v1
1

#1) I created a reusable directive as below:

clubApp.directive(‘clubMatch’, function() {
return {
restrict: ‘E’,
scope: {
match: ‘=’,
onComment:‘&’,
onJoin:‘&’
},
templateUrl: ‘template/match.html’
};
});

#2) In another template this directive is embedded:

  <ion-item collection-repeat="match in matches">

    <club-match match="match" ></club-match>

  </ion-item>
</ion-list>

#3) the issue is when the app is launched, the list item is empty, but when I resize the window of browser, it suddenly emerge

2

I found it could be a bug in the ‘ion-item’, the css style ‘height’ is 35px at beginning, this is the reason my directive is hidden