Ionic: ng-show and page transition

Question

I'm developing a mobile app with Ionic but I'm not yet very familiar with this framework or Angular. There are some list items you can tap to see a page with some details.

This is my list template:

<ion-view view-title="In der Nähe">
  <ion-content>
    <ion-refresher
      pulling-text="Aktualisieren"
      on-refresh="loadData()">
    </ion-refresher>
    <ion-list>
      <ion-item href="#/event/location-details" ng-click="showDetails(location)" ng-repeat="location in locations">
        {{location.name}}
      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

Controller:

  ...
  $scope.showDetails = function(location)
  {
    $rootScope.currentLocationDetails = location;
  };
  ...

And this is the details page:

<ion-view view-title="{{location.name}}">
  <ion-content class="padding">
    <button ng-show="location.attr.wheelchair == 'yes'" class="button icon ion-paper-airplane button-balanced"></button>
    <button ng-show="location.attr.wheelchair == 'limited'" class="button icon ion-paper-airplane button-assertive"></button>
    <button ng-show="location.attr.wheelchair == 'no'" class="button icon ion-paper-airplane button-energized"></button>

    <button ng-show="location.attr.food == 'yes'" class="button icon ion-pizza button-balanced"></button>
    <button ng-show="location.attr.food == 'no'" class="button icon ion-pizza button-energized"></button>

    <button ng-show="location.attr.internet_access == 'yes'" class="button icon ion-wifi button-balanced"></button>
    <button ng-show="location.attr.internet_access == 'no'" class="button icon ion-wifi button-energized"></button>

    <button ng-show="location.attr.smoking == 'no'" class="button icon ion-no-smoking button-balanced"></button>
    <button ng-show="location.attr.smoking == 'yes'" class="button icon ion-no-smoking button-energized"></button>
  </ion-content>
</ion-view>

Controller:

app.controller('DetailsController', function($scope, $rootScope)
{
  $scope.location = $rootScope.currentLocationDetails;
});

This works well on Android devices but there's a problem on iOS:

Angular seems to evaluate the ng-show directives after/during the page transition.

This is how it looks on Android: https://www.youtube.com/watch?v=aspI95Jm574

iPad running iOS 8: https://www.youtube.com/watch?v=oCf3V8ewq40

You can see that all the buttons are visible during the animation.

What am I doing wrong? Is this a bug in Ionic? Is there a better way to pass the location object to the DetailsController in this case?

Please let me know if you need to see more of the code.

Thanks!

Answer 1

Another workaround is to use ng-hide class on every element that has the ng-hide or ng-show attribute.

<div class="ng-hide" ng-show="isVisible">my element</div>

This will assure that the element is hidden before the angular compiles. Later on when angular boots up the ng-show/hide directive will take care of ng-hide class.