Javascript IONAL:ng显示和页面转换

我正在用Ionic开发一个移动应用程序，但我还不太熟悉这个框架或角度。您可以点击一些列表项以查看包含一些详细信息的页面

这是我的列表模板：

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

这是详细信息页面：

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

这在Android设备上运行良好，但在iOS上存在一个问题：

Angular似乎在页面转换之后/期间评估ng show指令

这是Android上的外观：

运行iOS 8的iPad：

您可以看到，在动画期间，所有按钮都是可见的

我做错了什么？这是爱奥尼亚的臭虫吗？在这种情况下，是否有更好的方法将location对象传递给DetailsController

请让我知道，如果你需要看到更多的代码

---

谢谢

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

在详细信息页面的离子内容元素上设置ng斗篷。另外设置以下CSS：

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

你可以了解ng斗篷的行为

我认为这不会快很多，但您可以使用“共享服务”在控制器之间共享数据，这可能被认为是“更干净的”：

appServices.factory('shareService', function() {
    var shareService = {
        location : {}
    };
    return shareService;
});

在概览中，插入shareService并：

$scope.showDetails = function(location){
    shareService.location = location;
};

$scope.location = shareService.location;

在您的详细信息中，控制器插入shareService并：

$scope.showDetails = function(location){
    shareService.location = location;
};

$scope.location = shareService.location;

您还可以将其制作得更加精细，作为一个具有不同位置ID的数组

---

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

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

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

我的元素

---

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

感谢您的回复！不幸的是，ng斗篷指令没有改变任何事情。我试着将它应用到ion内容、包装器div和每个按钮上，但没有一个显示出任何效果。我还实现了建议的共享服务，效果很好，谢谢！您是否将ng斗篷与建议的CSS一起使用？这是最重要的部分。ng隐形元素在渲染就绪后将立即释放其类。另外，在你的按钮上是否有任何高度特定的CSS选择器，用于更改display属性？是的，我已经在我的菜单中设置了CSS内联。我也尝试过用div代替按钮（比如：），但结果是一样的。在过渡期间这些div也是可见的。好吧，很抱歉这不起作用。这并不是一个令人满意的答案，但让我们尝试一下：在每个按钮上，不是在父按钮上，而是在每个具有ng show属性的元素上，放置一个inline style=“display:none！important”。让我们看看这是否有帮助。顺便说一句，我在其他地方读到，将angular.js包含在头部而不是身体中也可能有所帮助。当我为每个按钮设置建议的样式属性（w/&w/o“！important”）时，所有按钮都不再可见。但我还观察到一件事：在《爱奥尼亚》中，当标题太长而无法显示时，它就会崩溃。此外，后退按钮标题仅更改为“后退”。在详细信息页面上，位置的名称显示在标题栏（）中。我在我的iPhone4上再次测试了它（速度要慢得多，你可以看得更长一点），看到标题在按钮消失的同时收拢了…一个已知的离子问题，请参见论坛中的讨论