如何隐藏在后台加载的数据？
Posted
技术标签:
【中文标题】如何隐藏在后台加载的数据？【英文标题】：How to hide data that loads in the background? 【发布时间】：2017-09-22 19:57:41 【问题描述】：我目前正在使用 Ionic 框架下的 AngularJS 开发移动应用程序，并且想知道如何隐藏用户以防止加载我的某些页面？不仅在列表级别，而且在包含产品详细信息或产品表的页面上。 :)
我知道加载系统（ionicLoading）可以一直使用到数据加载完毕，但是加载太多就不是很干净了。
如果您有建议或技巧，除了加载之外，我正在抓住:)
【问题讨论】：
我不清楚您所说的“隐藏用户加载”是什么意思？你能澄清一下吗？你想让他们看不到图像吗？还是您不希望它们加载？ 【参考方案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，您可以找到更多关于使用它的信息。
【讨论】：
以上是关于如何隐藏在后台加载的数据？的主要内容，如果未能解决你的问题，请参考以下文章
R Shiny 在后台加载隐藏的侧边栏（使用 bs4Dash 包）
如何在后台线程中从 NSFetchedResultsController 加载大数据