离子隐藏/显示滚动问题

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

以下是一些可能有助于深入了解的代码片段。

代码笔

编辑：我制作了一个重现问题的代码笔：

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>

控制器.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;
    })
  });

有人有解决这个问题的方法吗？提前感谢您的帮助！

-杰里米