Bij gebruik van ng-show/-hide wordt de inhoud in die blokken in eerste instantie weergegeven op het gebruikersscherm. Pas na enkele milliseconden (nadat angular.js is geladen en uitgevoerd) verschijnt het rechterblok in ng-show.
Is er een betere manier dan ng-show/-hide om alleen het relevante gegevensgedeelte in het DOM te laden?
Het probleem met ng-view is dat ik er maar één op de pagina kan hebben, dus ik moet het gedrag van veel secties van het DOM veranderen op basis van de huidige status.
Antwoord 1, autoriteit 100%
Om de “flash van ongecompileerde inhoud” te voorkomen, gebruikt u ng-bindin plaats van {{}}of gebruik ng-cloak:
<span ng-cloak ng-show="show">Hello, {{name}}!</span>
Als je ng-cloak gebruikt en je laadt Angular.js niet in het head-gedeelte van je HTML, dan moet je dit toevoegen aan je CSS-bestand en ervoor zorgen dat het bovenaan je pagina laadt:
p>
[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }
Houd er rekening mee dat u deze instructies alleen op uw eerste pagina hoeft te gebruiken. Inhoud die later wordt binnengehaald (bijvoorbeeld via ng-include, ng-view, etc.) wordt door Angular gecompileerd voordat de browser wordt weergegeven.
Is er een betere manier om andere gegevens te laden dan ng-show / hide, waarbij alleen de relevante sectie in het DOM wordt geladen.
Sommige alternatieven voor ng-show/ng-hide zijn ng-include, ng-switchen (sinds v1.1.5) ng-if:
<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>
Zie ook https://stackoverflow.com/a/12584774/215945voor een voorbeeld van het werken met ng-switch samen met ng-include.
Merk op dat ng-switch en ng-if DOM-elementen toevoegen/verwijderen, terwijl ng-show/hide alleen de CSS verandert (als dat belangrijk voor je is).
Antwoord 2, autoriteit 2%
Ik heb de ng-cloak-truc gebruikt en het lijkt niet zo goed te werken. Naar aanleiding van de Angular-documentatie heb ik het volgende aan mijn CSS toegevoegd en dat werkt:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Zie: http://docs.angularjs.org/api/ng.directive: ngCloak
Antwoord 3
Volgens Mark Rajcok’s goede antwoord, hier is een CodePenmet ng-show, ng-switch en ng-if in actie, zodat u de benaderingen kunt vergelijken en verschillen kunt zien in hoe de voorwaardelijke inhoud daadwerkelijk wordt weergegeven.
Merk op dat sommige mensen vinden dat ng-show iets sneller is dan ng-switch en ng-if voor op bestanden gebaseerde sjablonen. Maar u kunt $templateCachegebruiken om uw sjablonen tijdens het opstarten vooraf te laden, waardoor dit wordt verminderd of geëlimineerd. voordeel. Door ng-switch en ng-if te gebruiken, hoeft u zich niet langer bezig te houden met verborgen voorwaardelijke inhoud in de DOM wanneer deze niet nodig is, en voorkomt u dat expressies op die inhoud op ongelegen momenten door Angular worden geëvalueerd. Dat bespaart u verwerkingsbronnen die u niet hoeft te verspillen, en voorkomt fouten die kunnen optreden wanneer iets voortijdig wordt geëvalueerd.