Angular1.3+Ionic beta14 list performance issues

Hello,

Last two days I tried to migrate to Ionic beta 14 and decided to stay for a while with beta 13. I can’t tell that my application is simple but I was surprised that nor cache neither angular 1.3 improvements somehow improved performance.

As example I have infinit-scroll list of 20-30 items where I show on start 5 items. I can’t use cache because If I get event from native, I need update full list but without cache I can’t remember scroll position. I use bindonce plugin and on Beta13 on Android it works not like native but users can stay with that. After upgrade to Beta14 - on Androids scrolling just stuck. Even on iOS I feel performance degradation. Its true that I don’t use angualr bindonce with :: but pasvaz/bindonce makes job well too.

I hope I’ll join in next build.


This is list item Example

<ion-item         
    class="item wm-group-item" 
    ng-repeat="group in groupItems"
    id="{{'wm_group_item_' + $index}}"
    on-finish-render="renderDone" ng-cloak>
    <span ng-if="group.isDevider" class="wm-devider">
        <span bo-text="group.title.day" ></span>
        <span bo-text="group.title.date"></span>
    </span>
    <div ng-if="!group.isDevider">
        <div class="row wm-group-row" >
            <div class="col" bo-class="{'true': 'button wm-button','false': 'wm-images-one'}[group.groupStatus.name != 'STATS']" 
                 ng-click="itemClick(group.mGroupId, group.groupStatus.name);">
                <div class="row" >
                    <div class="col col-20" >
                        <div bo-class="{'true': 'wm-images-no-image','false': 'wm-images-one'}[group.mAvatarImgBase64Str === 'none']">                           
                            <div ng-if="group.mAvatarImgBase64Str !== 'none'" class="row wm-group-image-row" >
                                <img  ng-src="{{group.mAvatarImgBase64Str}}" alt="img/default.png"/>
                            </div>  
                            <div ng-if="group.mAvatarImgBase64Str === 'none'" class="wm-organizer-let" 
                                 bo-style="getGroupImgBgColor(group.organizer.mName[0])" 
                                 bo-text="group.organizer.mName[0].toUpperCase()">                                   
                            </div>
                            <div bo-if="group.mMeeterType === true && group.groupStatus.name !== 'IDLE' && showDebugStats.value === true">
                                <span>M</span>
                            </div>
                        </div> 
                    </div>
                    <div class="col wm-col-80" >
                        <div style="margin-left: 10px;">
                            <div ng-if="group.groupStatus.name == 'IDLE'" class="row" >
                                <p class="wm-group-item-title" bo-text="group.modifiedTitle"></p> 
                            </div>
                            <div  ng-if="group.groupStatus.name == 'IDLE'">
                                <div class="row" >           
                                    <p class="wm-group-status" bo-text="'Last meeting: ' + group.title">
                                    </p>
                                </div>
                                <div class="row" > 
                                    <i class="icon settings-wm-ion-icon ion-eye"></i> 
                                    <span  class="wm-group-status wm-group-stats">{{group.stats.met}}/{{group.stats.spent}} in last 30 days</span>                       
                                </div>
                            </div>
                            <div ng-if="group.groupStatus.name == 'COMPLETED' || group.groupStatus.name == 'WAITING'" 
                                 class="row">
                                <p class="wm-group-item-title" bo-text="group.title" style='width: 100%;'></p> 
                            </div>
                            <div  ng-if="group.groupStatus.name == 'COMPLETED' || group.groupStatus.name == 'WAITING'" 
                                  >        
                                <div class="row" style="padding-top: 0px;">
                                    <p class="wm-group-status" bo-text="groupTimeDisplay(group.startDate_HH_mm,group.end_HH_mm)">
                                    </p>
                                </div>
                                <div class="row">
                                    <p ng-if="group.modifiedTitle || group.modifiedOrgTitle" class="wm-group-status">
                                        With <span style="font-weight: bold;">{{group.modifiedOrgTitle}}</span> {{group.modifiedTitle}}
                                    </p>
                                </div>
                                <div bindonce="group.groupStatus" class="row" ng-if="group.groupStatus.name == 'WAITING'" >
                                    <p class="wm-group-status-wait" 
                                       bo-if="group.groupStatus.value === 5" 
                                       bo-text="constants.group_item_status_respond">
                                    </p>
                                    <p class="wm-group-status-wait" 
                                       bo-if="group.groupStatus.value === 1" 
                                       bo-text="constants.group_item_status_wait">
                                    </p>
                                </div>
                            </div>
                            <div ng-if="group.groupStatus.name == 'STATS'">
                                <p class="wm-group-item-title" bo-text="group.modifiedTitle"></p>
                                <p class="wm-group-status" bo-text="group.stats.met"></p> 
                                <p style="margin-bottom:5px" class="wm-group-status">spent {{group.stats.spent}}</p>
                                <div style="position:absolute; right:2px; top:40%;" bo-text="((group.percentage === 0) ? '> 1' : group.percentage) + '%'"></div>
                                <div>
                                    <div style="height:7px; background-color:green; width:{{group.percentage}}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</ion-item>
<ion-infinite-scroll         
    distance="10%"  on-infinite="fetchGroups()"
    icon="ion-loading-d"
    ng-if="moreDataCanBeLoaded()"></ion-infinite-scroll>
<!--      </ion-scroll>  -->

Its true that above mentioned item is too complicated because I have 3 Tabs with 3 lists and I use the same template for every list. Maybe its not good practice and I need to create 3 different items