Question

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

我知道加载系统（ionicLoading）可以在数据加载之前使用，但是当它太多时它不是很干净。

如果您有任何建议或窍门，除了装载，我抓住：）

Answer 1

我通常的做法是将$scope变量设置为false，然后无论我在等待什么，都将其设置为true。通常，它在承诺范围内，但为了演示，我们将使用$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

Answer 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上，您可以找到有关使用此功能的更多信息。

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

2 个答案: