如何隐藏在后台加载的数据？答案

【问题标题】：How to hide data that loads in the background?如何隐藏在后台加载的数据？
【发布时间】：2023-03-05 09:13:01
【问题描述】：

我目前正在使用 Ionic 框架下的 AngularJS 开发移动应用程序，并且想知道如何隐藏用户以防止加载我的某些页面？不仅在列表级别，而且在包含产品详细信息或产品表的页面上。 :)

我知道加载系统（ionicLoading）可以一直使用到数据加载完毕，但是加载太多就不是很干净了。

如果您有建议或技巧，除了加载之外，我正在抓住:)

【问题讨论】：

我不清楚您所说的“隐藏用户加载”是什么意思？你能澄清一下吗？你想让他们看不到图像吗？还是您不希望它们加载？

标签： javascript jquery angularjs ionic-framework

【解决方案1】：

我通常的技巧是将$scope 变量设置为false，然后在我等待的任何时间完成时将其设置为true。通常，它在promise 中，但为了演示，我们将使用$timeout。

使用boolean 变量，我们可以使用Angular 内置的ng-hide 和ng-show 指令根据我们的逻辑控制要隐藏/显示的DOM 元素。

在这里的例子中，$scope.loaded 是 false，直到我们的工作完成（这里，简单地用 5 秒模拟 $timeout）

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  
  $scope.loaded = false;
  
  //Simulate loading

  $timeout(function(){
     $scope.loaded = true;
  }, 5000);
 
  
});

.container {
  border: solid 1px #ccc;
  background: #eee;
  margin: auto;
  max-width: 800px;
  text-align: center;
  font-family: Verdana;
  padding: 20px 0 5px;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div class="container">
    <div ng-hide="loaded">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
      <p>Loading...</p>
    </div>

    <div ng-show="loaded">
      <i class="fa fa-check fa-3x fa-fw"></i>
      <p>All done.</p>
    </div>
  </div>


</body>

</html>

Plunker 镜像：http://plnkr.co/edit/zEmdKQ3QBCpqORsb6RdT?p=preview

【讨论】：

最好直接使用$timeout 而不是window.setTimeout，你不需要$scope.$apply();。 $scope.$apply(); 根本不推荐

【解决方案2】：

ionicLoading的实现真的很容易理解。

您的控制器中允许所有逻辑：

$ionicLoading.show({
  template: 'Loading Data...', // The html content of the indicator
  duration: 3000 // How many milliseconds to wait until automatically hiding the indicator
});

您需要在向后端服务或端点发出请求之前将其放入。当请求完成后，您只需要使用以下方法隐藏叠加层：

$ionicLoading.hide().then(function(){
  console.log("The loading indicator is now hidden");
});

在official docs，您可以找到更多关于使用它的信息。

【讨论】：