In un video AngularJS in un punto ho visto come evitare che un'espressione sia visibile prima che il Javascript la analizzi. Ma non ricordo come sia stato fatto ...Evitare espressioni mostrate al caricamento della pagina
Ho un <div id='message'>{{$root.initializing.status}}</div> che mi piacerebbe dire "Caricamento in corso ..." prima che AngularJS abbia la possibilità di analizzarlo. Come si può fare?
Come gli altri citati, usa ng-cloak ma aggiungi anche il seguente al tuo CSS se è il primo a caricare nella tua pagina.
[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}
Ciò garantirà che il modello div sia nascosto. Sotto questo modello div, aggiungere qualcosa come
Caricamento in corso ...L'assegnazione del $ root.initializing.status con causa un valore true per ng-hide.
Ecco l'jsfiddle e il seguente è il codice:
HTML:
<div ng-controller='Ctrl'>
<div id='message'>{{$root.initializing.status}}</div>
<div ng-hide="$root.initializing.status">Loading...</div>
</div>
JS:
function Ctrl($timeout, $scope) {
///simulating loading
$timeout(function() {
$scope.$root = {
initializing: {
status: 'Complete!'
}
}
}, 2000);
}
Usa ng-mantello http://docs.angularjs.org/api/ng.directive:ngCloak
<div id="template1" ng-cloak>{{ 'hello' }}</div>
o ng-bind http://docs.angularjs.org/api/ng.directive:ngBind
Hello <span ng-bind="name"></span>!
È possibile nascondere un'espressione con ngCloak, vedono questa risposta:
Per quanto riguarda il caricamento, è sufficiente impostare $ root.initializing.status su un valore predefinito di "Caricamento" e ripristinarlo quando si ricevono i dati.
Che non funziona per me, sto ancora vedendo '{{myvar}}' flash sulla pagina. – Webnet
Usa ng-cloak direttiva per evitare il tremolio al caricamento della pagina.
Nel caso qualcuno trovi utile questa informazione, sto usando il seguente workaroud.
<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>
e
.hide{display: none;}
Uso questo per nascondere tutti i contenuti che le espressioni come angolari fino controller viene caricato, dove ho impostato this.pageLoaded = true.
<div id='message'><span ng-bind="$root.initializing.status"></span></div>
Ma quale è meglio? – pkk
@pkk: per mostrare e nascondere la necessità, ngCloak. In caso di utilizzo dell'elemento come segnaposto, vai per ng-bind –