Hoe kan ik in AngularJS een waarde weergeven zonder gegevensbinding in twee richtingen? Misschien wil je dit doen om prestatieredenen, of zelfs om een waarde op een bepaald moment te geven.
De volgende voorbeelden gebruiken beide databinding:
<div>{{value}}</div>
<div data-ng-bind="value"></div>
Hoe geef ik valuezondergegevensbinding weer?
Antwoord 1, autoriteit 100%
Angular 1.3+
In 1.3 heeft Angular dit ondersteund met behulp van de volgende syntaxis.
<div>{{::message}}</div>
Zoals vermeld in dit antwoord.
Hoekig 1.2 en lager
Dit is eenvoudig en heeft geen plug-in nodig. Bekijk dit eens.
Deze kleine richtlijn zal gemakkelijk bereiken wat u probeert te bereiken
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope ) {
setTimeout(function() {
$scope.$destroy();
}, 0);
}
}
});
Je kunt zo een keer binden
<div bind-once>I bind once - {{message}}</div>
Je kunt binden zoals normaal
<div ng-bind="message" bind-once></div>
Demo: http://jsfiddle.net/fffnb/
Sommigen van jullie gebruiken misschien hoekige batarang, en zoals vermeld in de opmerkingen als je deze richtlijn gebruikt, wordt het element nog steeds als bindend weergegeven als dat niet het geval is, ik ben er vrij zeker van dat dit iets te maken heeft met de klassen die zijn gekoppeld aan het element dus probeer dit, het zou moeten werken (niet getest). Laat me in de reacties weten of het voor jou heeft gewerkt.
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope, $element ) {
setTimeout(function() {
$scope.$destroy();
$element.removeClass('ng-binding ng-scope');
}, 0);
}
}
});
@x0b: Als je OCD hebt en je wilt het lege classattribuut verwijderen, doe dit dan
!$element.attr('class') && $element.removeAttr('class')
Antwoord 2, autoriteit 35%
Het lijkt erop dat Angular 1.3 (beginnend met bèta 10) eenmalige binding heeft ingebouwd:
https://docs.angularjs.org/guide/expression#one- tijdgebonden
Eenmalige binding
Een uitdrukking die begint met :: wordt beschouwd als een eenmalige uitdrukking.
Eenmalige uitdrukkingen worden niet meer herberekend zodra ze stabiel zijn,
wat gebeurt na de eerste samenvatting als het resultaat van de uitdrukking a . is
niet-ongedefinieerde waarde (zie algoritme voor waardestabilisatie hieronder).
Antwoord 3, autoriteit 14%
Gebruik de bindonce-module. U moet het JS-bestand opnemen en als afhankelijkheid toevoegen aan uw app-module:
var myApp = angular.module("myApp", ['pasvaz.bindonce']);
Met deze bibliotheek kunt u items weergeven die slechts één keer zijn gebonden – wanneer ze voor het eerst worden geïnitialiseerd. Alle verdere updates van die waarden worden genegeerd. Het is een geweldige manier om het aantal weergaven op de pagina te verminderen voor dingen die niet veranderen nadat ze zijn weergegeven.
Gebruiksvoorbeeld:
<div bo-text="value"></div>
Als het op deze manier wordt gebruikt, wordt de eigenschap onder valueingesteld zodra deze beschikbaar is, maar daarna wordt het horloge uitgeschakeld.
Antwoord 4, autoriteit 5%
Vergelijking tussen @OverZealous en @Connor antwoorden:
Met de traditionele ngRepeat van hoekig: 15s voor 2000 rijen en 420mo RAM (Plunker)
Met ngRepeat en de module van @OverZealous: 7s voor 2000 rijen en 240mo RAM(Plunker)
Met ngRepeat en de richtlijn van @Connor: 8s voor 2000 rijen en 500mo RAM (Plunker)
Ik heb mijn tests gedaan met Google Chrome 32.
Antwoord 5, autoriteit 4%
Als alternatief is er een angular-once-pakket:
Als je AngularJS gebruikt, prestatieproblemen hebt en veel moet weergeven
van alleen-lezen gegevens, dit project is voor jou!
angular-onceis eigenlijk geïnspireerd door bindonceen biedt vergelijkbare once-*attributen:
<ul>
<li ng-repeat="user in users">
<a once-href="user.profileUrl" once-text="user.name"></a>
<a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
<div once-class="{'formatted': user.description}" once-bind="user.description"></div>
</li>
</ul>