javascript - Ionic: ng-show and page transition - Stack Overflow

admin管理员组

文章数量:1328029

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:

iPad running iOS 8:

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!

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./watch?v=aspI95Jm574

iPad running iOS 8: https://www.youtube./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!

• javascript
• angularjs
• cordova
• ionic-framework

Share Improve this question Follow asked Feb 4, 2015 at 3:02 C.M.C.M. 74588 silver badges2121 bronze badges 1

• 1 A known Ionic issue, see the discussion in the forum here forum.ionicframework./t/beta-14-ng-hide-show/14270/10 – ssmith Commented Apr 28, 2015 at 2:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 piles. Later on when angular boots up the ng-show/hide directive will take care of ng-hide class.

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.

2. 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.

本文标签： javascriptIonic ngshow and page transitionStack Overflow