我正在开发一个带有Ionic的移动应用程序,但我还不熟悉这个框架或Angular.您可以点击一些列表项来查看包含一些详细信息的页面.
这是我的列表模板:
<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>
控制器:
... $scope.showDetails = function(location) { $rootScope.currentLocationDetails = location; }; ...
这是详细信息页面:
<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>
控制器:
app.controller('DetailsController',function($scope,$rootScope) { $scope.location = $rootScope.currentLocationDetails; });
这适用于Android设备但iOS上存在问题:
Angular似乎在页面转换之后/期间评估ng-show指令.
这是它在Android上的外观:
https://www.youtube.com/watch?v=aspI95Jm574
运行iOS 8的iPad:
https://www.youtube.com/watch?v=oCf3V8ewq40
您可以看到动画期间所有按钮都可见.
我究竟做错了什么?这是Ionic的一个错误吗?在这种情况下,是否有更好的方法将location对象传递给DetailsController?
如果您需要查看更多代码,请告诉我们.
谢谢!