Question

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

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

Codepen

编辑：我制作了一个可以重现问题的编解码器：

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

重现的步骤：

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

代码

模板页面

  <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;
    })
  });

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

-Jérémy

Answer 1

我们点击按钮调用控制器中的一个功能，并使用$(document).ready(function() { var btnWrapper = $('#footerButtonsM'); var loading = $('#footerButtonsM .fa-circle-o-notch'); $('#registerButtonM').on('click', function() { var btn = $(this); btn.hide(); loading.show(); if ($('#passRegisterM').val().length <= 8) { setTimeout(function(){ loading.hide(); btn.show(); }, 2000) } }); });

调整文档的高度

HTML

$ionicScrollDelegate.resize();

JS

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

注意

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

的控制器中添加依赖项

Answer 2

我终于找到了这个问题的答案。我将overflow-scroll元素添加到ion-content元素。

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

这解决了这个问题。它确实与底部间距混淆了一些，但你可以用一些CSS修复它。

Ionic ng-hide / ng-show滚动问题

Codepen

代码

2 个答案:

HTML

JS

注意