离子ng-hide / ng-show滚动问题

Question

我目前正在为某人构建Ionic应用程序，但是ng-hide和ng-scroll出现了一些问题。 该页面显示了一种产品，您可以在查看营养或成分之间进行切换。 我使用ng-hide和ng-show来实现这一点。 但是，当我按下按钮切换数据时，滚动条会混乱。 我附加了一个简短的视频来演示该问题： https : //youtu.be/W9fFMdSLW8s

以下是一些有助于理解的代码片段。

码笔

编辑：我做了一个codepen，重现该问题：

http://codepen.io/JeremyKeusters/pen/qmBwzp

重现步骤：

1. 请确保浏览器高度和预览窗口不要太大。
2. 点击绿色的“显示营养素”按钮，然后尝试立即向下滚动 。 （就像使用电话一样，使用鼠标拖动来滚动）
3. 您会发现自己被阻止，无法向下滚动。 解决方案是等待几秒钟，直到滚动“重置”。
4. 尝试再次单击底部的绿色按钮。 您会看到有很多空白可以滚动（滚动区域太大）。 解决方法是再次等待几秒钟，直到它重置。

码

模板页面：

  <table class="ingredients" ng-show="toggle">
    <tr>
      <th class="left">Ingredient</th>
      <th class="right">Amount per<br>100 ml</th>
    </tr>
    <tr ng-repeat="ingredient in JuiceIngredients">
      <td class="left">{{ingredient.Ingredient.Name}}</td>
      <td class="right">{{ingredient.Ingredient.Amount_g}} g</td>
    </tr>
  </table>
  <table class="nutrients" ng-hide="toggle">
    <tr>
      <th class="left">Nutrient</th>
      <th class="right">Amount per 100 ml</th>
      <th class="right">% of reference quantity</th>
    </tr>
    <tr ng-repeat="nutrient in JuiceNutrients">
      <td class="left">{{nutrient.Nutrient.Name}}</td>
      <td class="right" ng-bind-html="nutrient.Nutrient.Amount_html"></td>
      <td class="right">{{(nutrient.Nutrient.PartOfRI * 100 | number:0)}} %</td>
    </tr>
  </table>
  <br>
  <button ng-click="toggle=!toggle;" class="button button-block button-balanced default-button">
    <span ng-hide="toggle">Show ingredients</span>
    <span ng-show="toggle">Show nutrients</span>
  </button>

controller.js：

  bottleSrv.getBottleDetails($rootScope.scannedCode).then(function (data) {
    $scope.JuiceID = data.JuiceID;
    $scope.ExpirationDate = data.ExpirationDate;
    $scope.JuiceImg = "https://someurl.com/task.php?token=" + $rootScope.userToken + "&juice_id=" + data.JuiceID + "";

    juiceSrv.getJuiceDetails($scope.JuiceID).then(function (data) {
      $scope.JuiceName = data.Name;
      $scope.JuiceDescription = data.Description;
    })

    juiceSrv.getJuiceIngredients($scope.JuiceID).then(function (data) {
      $scope.JuiceIngredients = data;
    })

    juiceSrv.getJuiceNutrients($scope.JuiceID).then(function (data) {
      $scope.JuiceNutrients = data;
    })
  });

有人对此问题有解决方案吗？ 在此先感谢您的帮助！

-杰里米

Answer 1

您单击按钮在控制器中调用一个函数，并使用$ionicScrollDelegate.resize();调整文档的高度$ionicScrollDelegate.resize();

html

<button ng-hide="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show ingredients
</button>

<button ng-show="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show nutrients
</button>

js

$scope.toggle = false;
$scope.toggleButton = function() 
{
  $scope.toggle = !$scope.toggle;
  $ionicScrollDelegate.resize();
};

注意

在名为$ionicScrollDelegate控制器中添加依赖$ionicScrollDelegate

Answer 2

我终于找到了这个问题的答案。 我将溢出滚动元素添加到了离子含量元素中。

<ion-content overflow-scroll="true">

这解决了问题。 它确实使底部间距有些混乱，但是您可以使用一些CSS来解决。