Question

我正在使用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？

如果您需要查看更多代码，请与我们联系。

谢谢！

Answer 1

另一种解决方法是在每个具有 ng-hide 或 ng-show 属性的元素上使用 ng-hide 类。

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

这将确保在角度编译之前隐藏元素。稍后当角度启动时，ng-show / hide指令将处理ng-hide类。

Answer 2

我会尝试回答这两个问题：

在详细信息页面中的ion-content元素上设置ng-cloak。另外设置以下CSS：
```
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
```

您可以阅读ng-cloaks行为here。

我认为它不会快得多，但您可以使用'shareService'在控制器之间共享数据，这可能被认为是“更干净”：
```
appServices.factory('shareService', function() {
    var shareService = {
        location : {}
    };
    return shareService;
});
```
在概述控制器中注入shareService并：
```
$scope.showDetails = function(location){
    shareService.location = location;
};
```
在DetailsController中注入shareService并：
```
$scope.location = shareService.location;
```
你也可以将这个更精细，作为一个包含不同位置的ID的数组。

最后的想法是对所有不同的按钮使用一个指令，使其更具可重用性。然后，您可以跳过渲染，然后隐藏所选位置中不可用的按钮。

离子：ng-show和页面转换

2 个答案: