23
- Che cos'è la direttiva
ng-cloak? - Perché lo usiamo?
A
risposta
29
NG-mantello
Dalla documentazione:
La direttiva ngCloak è usato per prevenire il modello HTML angolare venga visualizzato brevemente dal browser nella sua forma grezza (non compilato) in tutta l'applicazione sta caricando. Utilizzare questa direttiva per evitare l'effetto sfarfallio indesiderato causato dalla visualizzazione del template html.
In breve, è possibile utilizzare la direttiva ng-cloak per impedire la visualizzazione di elementi non completati. Elemento non compilato può essere un elemento che detengono e attendere i dati in entrata:
<div ng-cloak>{{myvar}}</div>
se il controllore myvar ancora non compilato o il dato non viene popolato ng-mantello prevenire il "{{myvar}}" venga visualizzato e solo la volontà mostra il div quando la variabile è compilata.
Seguire questo esempio di codice e controllare results con e senza ng-mantello:
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display: none !important;
}
</style>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData">
{{item.title}}
</li>
</ol>
</body>
var myApp= angular.module("myApp",['ngResource']);
myApp.controller("MyController", ["$scope", "$resource","$timeout",
function($scope,$resource,$timeout){
$scope.myData =[];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow){
console.log(aSingleRow);
$scope.myData.push({
"title":aSingleRow.title
});
});
});
}]);
+6
quando NON vuoi avere ng-cloak? sembra che non ci sia un rovescio della medaglia – WindowsMaker
11
La ragione espressa utilizzando ng mantello Ben è valida, ma il risultato dell'esempio fornito da Ben sarà in qualche le situazioni mostrano ancora lo {{var}}. Ciò è particolarmente vero in natura quando gli script vengono generalmente caricati in modo asincrono o posizionati nella parte inferiore di qualsiasi corpo html.
Nell'esempio di Ben ha messo un <style> in alto, ma non lo usa, si dovrebbe posto la classe ng mantello sul <body>, in questo modo, e l'uso che lo styling:
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...
In questo modo il contenuto del tag body non verrà mostrato fino a quando Angular cambia ng-cloak a display: block o la direttiva aggiorna il tag html.
La ragione per aggiungere la classe è perché la direttiva ng-mantello è analizzata dopo la visualizzazione del codice HTML, quindi c'è sempre la possibilità che il filo JS muore e visualizza ancora nulla di simile {{something here}}.
Un buon esempio di uso corretto sarebbe quello di includere la direttiva class="ng-cloak" e ng-cloak su una direttiva ng-repeat.
Tuttavia, se proprio il {{}} è fastidioso e altrimenti la pagina va bene anche quando il thread JS si è bloccato, è meglio usare ng-bind sui tag piuttosto che aggiungere {{}} all'interno di essi.
0
Una nota che vorrei aggiungere - Ho visto per la maggior parte dell'applicazione, solo l'aggiunta di ng-cloak non funziona. È perché quella pagina potrebbe essere più grande e js non viene caricato fino a quel momento.
applicazione manuale CSS per questa direttiva aiuterebbe qui -
[ng-cloak]
{
display: none !important;
}
Spero che questo sarebbe di aiuto a qualcuno!
Hai visto il superman aka clark kent e la sua mossa epica dove si sbottona la camicia mostrando il suo completo parzialmente in un vicolo buio. E se attraversasse l'intero vicolo mentre non si è ancora spogliato completamente e si è trasformato in un supereroe con il suo vestito lucido con sopra una biancheria intima, whoops. Quindi il fumettista si assicurò che il vicolo fosse abbastanza lungo da non accadere in quel contrattempo. E sì, qui il vicolo è il nostro amato ngcloak, clark kent è html e il superman ovviamente è angularjs. ;) –
Potrebbe aiutare http://www.code-sample.com/2015/02/ng-cloak-directive-in-angularjs.html –