AngularJS: Wie um zu verhindern, "code " flash" auf der Seite beim laden
Habe ich eine einfache app mit AngularJS. Wenn ich die Seite öffnen, für eine Sekunde sehe ich den Bildschirm unten:
Jedoch, nachdem das laden abgeschlossen ist, sehe ich die geladen und gestalteten Inhalte, die gut ist:
Wie kann ich verhindern, dass der Blitz von AngularJS-code auf meine Seite ? Ist das mit FOUC ?
Hier ist der HTML-code:
<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style>
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="left tab-bar-section">
<h1 class="title">Salary Calculator</h1>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Location</label>
</li>
<li><a href="#">United Kingdom</a>
</li>
</ul>
</aside>
<section class="main-section">
<div class="row full-width">
<div class="large-4 columns">
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Annual Salary</a>
</li>
<li class="tab-title"><a href="#panel2">Monthly Expenses</a>
</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/>
</div>
</div>
</div>
<div class="content" id="panel2">
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/>
</div>
</div>
</div>
</div>
</div>
<div class="large-8 columns" ng-cloak >
<table >
<thead>
<tr>
<th width="200"></th>
<th width="250">Yearly</th>
<th width="250">Monthly</th>
<th width="250">Weekly</th>
<th width="250">Daily</th>
</tr>
</thead>
<tbody ng-repeat="val in results">
<tr>
<td>{{val.rowType}}</td>
<td>{{val.yearly}}</td>
<td>{{val.monthly}}</td>
<td>{{val.weekly}}</td>
<td>{{val.daily}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="../bower_components/angularjs/angular.js"></script>
<script src="js/app-service.js"></script>
<script src="js/app-controller.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>EDIT:
Finden Sie meine Antwort als auch für eine alternative Lösung neben der das akzeptiert.
Können Sie nach dem code relevant ? Ich würde sagen, dass die Verwendung von ng-bind, statt mit Ausdrücken wie {{}}.
möglich, Duplikat der AngularJS-Strategie um zu verhindern, dass flash of unstyled-Inhalte für eine Klasse
möglich, Duplikat der AngularJS-Strategie um zu verhindern, dass flash of unstyled-Inhalte für eine Klasse
InformationsquelleAutor Cemre | 2015-02-14
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
ng-cloak hilft in gewissem Maße, aber Sie können vollständig verhindern, dass es mit ng-bind-Richtlinie anstelle der Verwendung
{{ }}.z.B.
nicht
<h1 ng-bind="title">Loading...</h1>InformationsquelleAutor mikel
Es wurde eine lange Zeit, aber hier ist meine funktionierende Lösung für dieses:
Müssen Sie
ng-cloakauf den body-tag Ihrer html-ABER der wichtigste Teil ist dieser CSS-unten:[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {display: none !important;
}
Für mich, die ich hatte, um diese für die erste ng-cloak zu arbeiten. Dies ist wahrscheinlich nicht die einzige Lösung für dieses problem, wie schon in anderen Antworten. Hoffe, das jemand hilft.
InformationsquelleAutor Cemre
Winkel bereits gibt Ihnen das Werkzeug, um dies zu verhindern:
ngCloak: https://docs.angularjs.org/api/ng/directive/ngCloakEinfach die Richtlinie auf Ihrem Körper wie
<body ng-cloak>und es sollte funktionieren.BEARBEITEN
Die Docs auch Ratschläge, die Sie eigentlich nicht legte es auf den Körper, sondern auf kleinere Portionen Ihrer Seite - wo Sie die Notwendigkeit sehen. Je nach Größe Ihrer Seite, das ist eine gute Idee. Für kleinere Seiten, die ich legte es auf den Körper und hatte nie Probleme.
InformationsquelleAutor Charminbear