2017-04-25 3 views
1

Ich arbeite gerade an einer mobilen Anwendung in AngularJS unter dem Ionic Framework, und fragte mich, wie man einen Benutzer verstecken von dem Laden einiger meiner Seiten? Nicht nur auf der Ebene der Listen, sondern auch auf Seiten mit Details zu einem Produkt oder Produktblatt. :)Wie blende ich Daten aus, die im Hintergrund geladen werden?

Ich weiß, dass das Ladesystem (ionicLoading) verwendet werden kann, bis die Daten geladen werden, aber wenn es zu viel ist, ist es nicht sehr sauber.

Wenn Sie Anregungen oder Tricks haben, anders als der Laden, ich packe :)

+1

Ich bin nicht klar, was Sie mit "Verbergen eines Benutzers vom Laden" meinen? Können Sie das klären? Sie möchten, dass sie die Bilder nicht sehen? oder willst du sie nicht laden? –

Antwort

0

Mein üblichen Trick ist, einen $scope Variable false, zu setzen und es dann zu true gesetzt, wenn allem, was ich warte auf erledigt. In der Regel ist es in einem Versprechen, aber der Demo wegen verwenden wir $timeout.

Mit einer boolean Variable können wir dann Angular eingebaute in ng-hide und ng-show Richtlinien verwenden, um zu steuern, welche Elemente DOM zu verbergen/zeigen auf der Grundlage unserer Logik.

Im Beispiel hier $scope.loaded ist false bis unsere Arbeit erledigt ist

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 Spiegel hier (hier einfach mit einem 5 Sekunden $timeout simuliert): http://plnkr.co/edit/zEmdKQ3QBCpqORsb6RdT?p=preview

+1

Besser wird es sein, '$ timeout' direkt anstelle von' window.setTimeout' zu verwenden, Sie würden '$ scope. $ Apply();' nicht brauchen. '$ scope. $ apply();' wird überhaupt nicht empfohlen – e666

+0

Guter Anruf, @ e666 - aktualisiert. – couzzi

0

Die Implementierung von ionicLoading ist wirklich einfach zu verstehen.

die All-Logik wird in dem Controller erlaubt:

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

Sie müssen das setzen, bevor Sie Ihre Anfrage an Ihren Backend-Service oder Endpunkt zu machen. Wenn die Anforderung abgeschlossen ist, müssen Sie nur die Überlagerung mit dem folgenden Verfahren verbergen:

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

Auf der official docs, können Sie diese mehr Informationen über die Verwendung finden.

Verwandte Themen