CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
C.M.
C.M.

Reputation: 745

Ionic: ng-show and page transition

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!

Upvotes: 7

Views: 6290

Answers (2)

dzonatan
dzonatan

Reputation: 116

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.

Upvotes: 5

mwiegboldt
mwiegboldt

Reputation: 2760

I'll try to answer both questions:

  1. Set ng-cloak on the ion-content element in your details page. Additionally setup the following CSS:

    [ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

You can read up on ng-cloaks behaviour here.

  1. I don't think it'll be much faster, but you can use a 'shareService' to share data between controllers, which might be considered 'cleaner':

    appServices.factory('shareService', function() {
    var shareService = {
        location : {}
    };
    return shareService;
});

    In your overview controller inject the shareService and:

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

    In your DetailsController inject the shareService and:

    $scope.location = shareService.location;

    You could also make this one more elaborate, as an array with ids of the different locations.

Final thought would be to use one directive for all the different buttons, to make it more reusable. You could then skip rendering and then hiding the buttons that are not available in the selected location.

Upvotes: 0

Related Questions