Ng-show/ng-hide performance problem with Google Map

ionic-v1
1

I have a detail page with some links on it and a Google map (using http://angular-ui.github.io/angular-google-maps/#!/)

One of the links has an ng-show on it like this:

The problem is that when the detail page loads, the ng-show is only run after the Map has finished rendering. So an item is visible when it should not be and then about 3 seconds later it disappears when the map has finished rendering.

I have tried adding an ng-cloak to it but this made no difference. ng-hide (and the inverse) also makes no difference.

        <a ng-show="gameAd.Telephone" href="tel:{{gameAd.Telephone}}" ng-click="callTelephone()" class="item item-icon-left assertive">
            <i class="icon ion-ios7-telephone"></i> Call {{gameAd.HostDisplayName}} on {{gameAd.Telephone}}
        </a>
        <div class="item" data-tap-disabled="true">
            <ui-gmap-google-map id="GameDetailMap" draggable="true" options="map.options" control="map.control" center="map.center" zoom="map.zoom">
                <ui-gmap-layer type="TrafficLayer" show="map.showTraffic"></ui-gmap-layer>
                <ui-gmap-marker coords="marker.coords" idkey="marker.id" >
                    <!--<marker-label content="marker.title" anchor="10 -8" class="marker-labels"></marker-label>-->
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
2

Any theories on this?

3

I’m encountering a similar thing. I’ve been browsing the forums as I’m not sure what to call it or what the issue is. It could be an Angular issue but it could also be some sort of Ionic caching problem. Seems to be an issue since upgrading from beta 8 to 14 and related Angular update. Caching was causing problems with my app because data wasn’t being shown as updated so I put in “cache:” false for all states in routes.js where the screen wasn’t static. I have also put in $ionicConfigProvider.views.maxCache(0); in app.js however it still seems to be doing the transitions.

If the screen transitioning to was the last screen that I accessed, the screen loads quickly with what looks like all possible content on the screen briefly then it looks like all ng-hide/ng-show are evaluated correctly then the page appears as expected. I’ve tried the same (ng-cloak & ng-hide) but they all do the same thing.

If it is not the last screen that I accessed, it slides across from either the right to the left or the left to the right (which I believe might be cache transition animations?) I’m yet to find what the rule is as to which direction they slide as it seems to be inconsistent.

This is not an issue on my laptop, however is on physical and simulator iOS devices. I don’t have an Android device to test with so not sure about that.

4

This is discussed over here and the fix in there worked for me.