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

我目前正在从事Ionic Framework下的AngularJS移动应用程序，并想知道如何隐藏用户加载我的一些页面？不仅在列表级别，而且在包含产品细节或产品表的页面上。 :)如何隐藏在后台加载的数据？

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

如果您有任何建议或技巧，比其他负载，我抓住:)

来源

2017-04-25 Lydia Ra

我不清楚你的意思是“隐藏用户加载”吗？你能澄清一下吗？你希望他们看不到图像？或者你想让他们不加载？ –

我惯用的伎俩是一个$scope变量设置为false，然后将其设置为true每当不管我等待已经完成了。通常情况下，这是一个承诺，但为了演示，我们将使用$timeout。

随着boolean变量，我们就可以使用角的基础上我们的逻辑内置ng-hide和ng-show指令来控制哪些DOM元素隐藏/显示。

在这里的例子，$scope.loaded是false，直到我们的工作已经完成

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="[email protected]" 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镜此处（here，只需5秒$timeout模拟）：http://plnkr.co/edit/zEmdKQ3QBCpqORsb6RdT?p=preview

来源

2017-04-25 17:38:57 couzzi

最好是直接使用'$ timeout'而不是'window.setTimeout'，你不需要'$ scope。$ apply（）;'。 '$ scope。$ apply（）;'根本不推荐' – e666

良好的调用，@ e666 - 更新。 – couzzi

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，你可以找到关于使用本的更多信息。

来源

2017-04-25 17:39:15

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

回答

相关问题