Alternatief voor ng-show/-hide of hoe u alleen relevant gedeelte van DOM laadt

Bij gebruik van ng-show/-hide wordt de inhoud van die blokken aanvankelijk weergegeven op het gebruikersscherm. Pas na enkele milliseconden (nadat angular.js is geladen en uitgevoerd) verschijnt het juiste blok in ng-show.

Is there a better way than ng-show/-hide to load only the relevant section of data into the DOM?

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 de DOM aanpassen op basis van de huidige status.

53
ja ru de

3 antwoord

Gebruik de ng-bind om de "flash van ongecompileerde inhoud" te vermijden in plaats van {{}} of gebruik ng-cloak :

Hello, {{name}}!

Als u ng-cloak gebruikt en u Angular.js niet in de kopsectie van uw HTML laadt, moet u dit toevoegen aan uw CSS-bestand en ervoor zorgen dat het bovenaan uw pagina wordt geladen:

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

Merk op dat u deze richtlijnen alleen op uw eerste pagina hoeft te gebruiken. Content die later wordt binnengehaald (bijvoorbeeld via ng-include, ng-view, etc.) wordt door Angular gecompileerd voordat de browser wordt gegenereerd.

Is er een betere manier om andere gegevens te laden dan ng-show/hide, waarbij alleen het relevante gedeelte in de DOM is geladen.

Sommige alternatieven voor ng-show/ng-hide zijn ng-include , < a href = "http://docs.angularjs.org/api/ng.directive:ngSwitch" rel = "nofollow noreferrer"> ng-switch en (sinds v1.1.5) ng-if :

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

Zie ook https://stackoverflow.com/a/12584774/215945 voor een voorbeeld van ng-switch dat samenwerkt met ng -include.

Merk op dat ng-switch en ng-als DOM-elementen toevoegen/verwijderen, terwijl ng-show/hide alleen de CSS wijzigt (als dat belangrijk voor u is).

106
toegevoegd
@MarkRajcok Ik denk dat je bedoelt gebruik ng-bind in plaats van {{}} om de inhoud te tonen
toegevoegd de auteur ???????, de bron
Hallo @ MarkRajcok Ik heb deze oplossing geprobeerd, maar het werkte niet voor mij :( vind je het erg om hier een kijkje te nemen? Laat me weten wat ik moet toevoegen om het gemakkelijker te maken om te debuggen! stackoverflow.com/questions/30540119/…
toegevoegd de auteur Leon Gaban, de bron
+1 voor het antwoord
toegevoegd de auteur murtaza52, de bron
@ user1226868, bedankt voor het commentaar. Ik heb mijn antwoord geherformuleerd om er in wezen op te letten dat als je Angular onder aan je pagina laadt (wat vaak aanbevolen wordt ), zal de CSS te laat laden. Om de API-pagina van ng-cloak te citeren: "Voor het beste resultaat moet het angular.js-script in de kopsectie van het html-bestand worden geladen of moet de css-regel (hierboven) in het externe stylesheet van de toepassing worden opgenomen ."
toegevoegd de auteur Mark Rajcok, de bron
@CMCDragonkai, plunker met ng-if. Notitie Hoekig v1.1.5 wordt opgenomen.
toegevoegd de auteur Mark Rajcok, de bron
@ 太極 者 無極 而 生, goed punt, bedankt. Ik heb het antwoord bijgewerkt.
toegevoegd de auteur Mark Rajcok, de bron
Ik probeer ng-if te gebruiken op basis van een functie-expressie. Hoewel de functie werkt, verwijdert de ng-if de DOM niet. In feite doet mijn recente AngularJS-app niets. Ik moest mijn toevlucht nemen tot ng-show. Kan iemand een echt voorbeeld van een NG geven - als hij werkt aan het verwijderen van de DOM?
toegevoegd de auteur CMCDragonkai, de bron
De CSS is niet vereist, omdat Angular dit in uw hoofd plaatst.
toegevoegd de auteur user1226868, de bron

Ik heb de truc met ng-mantels 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;
}

See: http://docs.angularjs.org/api/ng.directive:ngCloak

2
toegevoegd

Het goede antwoord van Per Mark Rajcok, hier is een CodePen met ng-show, ng-switch en ng-als in actie, dus je kunt de benaderingen vergelijken en verschillen 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 $ templateCache gebruiken om uw sjablonen tijdens het opstartproces vooraf te laden, zodat u deze kunt verminderen of elimineren. voordeel. Met ng-switch en ng-if hoef je niet langer te maken te hebben met verborgen conditionele inhoud in de DOM wanneer dat niet nodig is, en te voorkomen dat uitdrukkingen op die inhoud door Angular op ongelegen momenten worden geëvalueerd. Dat bespaart u verwerkingsbronnen die u niet hoeft te verspillen, en voorkomt fouten die kunnen worden geworpen wanneer iets vroegtijdig wordt geëvalueerd.

1
toegevoegd