离子:ng-show和页面转换

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 = osc3V8ewq40

您可以看到动画期间所有按钮都可见.

我究竟做错了什么？这是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

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

1. 在详细信息页面的 ion-content 元素上设置 ng-cloak。另外设置以下 CSS：

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

您可以在此处阅读 ng-cloaks 行为。

2. 我不认为它会快得多，但您可以使用“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 的数组。

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