Ionic: ng-show und page transition
Ich bin die Entwicklung einer mobilen app mit den Ionischen aber ich bin noch nicht sehr vertraut mit diesem framework oder Eckig. Es gibt einige Elemente der Liste können Sie Tippen, um eine Seite mit einigen details.
Dies ist meine Liste Vorlage:
<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;
};
...
Und diese ist die Seite mit den details:
<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;
});
Dies funktioniert auch auf Android-Geräten, aber es gibt ein problem, auf iOS:
Winkel scheint zu bewerten, die ng-show Richtlinien nach/während der Seitenübergänge.
Dies ist, wie es aussieht auf Android:
https://www.youtube.com/watch?v=aspI95Jm574
iPad mit iOS 8:
https://www.youtube.com/watch?v=oCf3V8ewq40
Können Sie sehen, dass alle Schaltflächen sichtbar sind, die während der animation.
Was mache ich falsch? Ist das ein bug im Ionischen? Gibt es einen besseren Weg, um pass das location-Objekt, um die DetailsController in diesem Fall?
Bitte lassen Sie mich wissen, wenn Sie brauchen, um zu sehen, mehr von dem code.
Dank!
- Eine bekannte Ionische Problem, siehe die Diskussion hier im forum forum.ionicframework.com/t/beta-14-ng-hide-show/14270/10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Andere Problemumgehung ist die Verwendung ng-hide Klasse auf jedes element der ng-hide oder ng-show Attribut.
Damit wird sichergestellt, dass das element ausgeblendet ist, bevor der kantige kompiliert. Später, wenn eckig, startet das ng-show/hide-Direktive kümmern ng-hide-Klasse.
Ich werde versuchen, beide Fragen zu beantworten:
Set ng-cloak auf der ion-content-element in Ihre details-Seite. Zusätzlich setup die folgenden CSS:
Können Sie Lesen, auf ng-Mäntel Verhalten hier.
Glaube ich nicht, es werden viel schneller, aber Sie können eine 'shareService' zum Austausch von Daten zwischen Controllern, von denen angenommen werden kann 'cleaner':
In Ihrer übersicht controller injizieren die shareService und:
In Ihrem DetailsController injizieren die shareService und:
Könnte man auch machen das ein aufwendiger, als ein array mit den ids der verschiedenen Standorte.
Letzter Gedanke wäre, um eine Richtlinie für all die verschiedenen Schaltflächen, um es wieder verwendbar. Sie könnte dann überspringen Rendern und dann verstecken Sie die Tasten, die nicht in der ausgewählten Position.