W AngularJS, jak mogę renderować wartość bez dwukierunkowego wiązania danych? Można to zrobić ze względu na wydajność, a nawet renderowanie wartości w danym momencie.
Poniższe przykłady używają powiązania danych:
<div>{{value}}</div>
<div data-ng-bind="value"></div>
Jak renderować value
bez powiązania danych?
javascript
angularjs
data-binding
Blowsie
źródło
źródło
ng-model
zapewnia dwukierunkowe powiązanie danych: zmiany modelu -> wyświetl aktualizacje, wyświetl zmiany -> aktualizacje modelu.Odpowiedzi:
Angular 1.3+
W wersji 1.3 Angular obsługiwał to przy użyciu następującej składni.
Jak wspomniano w tej odpowiedzi .
Kątowy 1.2 i niższy
Jest to proste i nie wymaga wtyczki. Sprawdź to.
Ta niewielka dyrektywa z łatwością osiągnie to, co próbujesz osiągnąć
app.directive('bindOnce', function() { return { scope: true, link: function( $scope ) { setTimeout(function() { $scope.$destroy(); }, 0); } } });
Możesz raz związać się w ten sposób
Możesz wiązać jak zwykle
<div ng-bind="message" bind-once></div>
Demo: http://jsfiddle.net/fffnb/
Niektórzy z was mogą używać kątowego batarangu i jak wspomniano w komentarzach, jeśli używasz tej dyrektywy, element nadal wyświetla się jako wiążący, gdy nie jest, jestem prawie pewien, że ma to coś wspólnego z klasami, które są dołączone do elementu, więc spróbuj tego, powinno działać (nie testowane) . Daj mi znać w komentarzach, czy to zadziałało.
app.directive('bindOnce', function() { return { scope: true, link: function( $scope, $element ) { setTimeout(function() { $scope.$destroy(); $element.removeClass('ng-binding ng-scope'); }, 0); } } });
@ x0b : Jeśli masz OCD i chcesz usunąć pusty
class
atrybut, zrób to!$element.attr('class') && $element.removeAttr('class')
źródło
Wygląda na to, że Angular 1.3 (zaczynając od beta 10) ma wbudowane jednorazowe powiązanie:
https://docs.angularjs.org/guide/expression#one-time-binding
źródło
Użyj modułu bindonce . Musisz dołączyć plik JS i dodać go jako zależność do modułu aplikacji:
var myApp = angular.module("myApp", ['pasvaz.bindonce']);
Ta biblioteka umożliwia renderowanie elementów, które są powiązane tylko raz - podczas pierwszej inicjalizacji. Wszelkie dalsze aktualizacje tych wartości będą ignorowane. To świetny sposób na zmniejszenie liczby obserwowanych na stronie elementów, które nie ulegną zmianie po wyrenderowaniu.
Przykład użycia:
<div bo-text="value"></div>
W takim przypadku właściwość poniżej
value
zostanie ustawiona, gdy będzie dostępna, ale wtedy zegarek zostanie wyłączony.źródło
$resource
.Porównanie odpowiedzi @OverZealous i @Connor:
Z tradycyjnym ngRepeat of angular: 15s dla 2000 rzędów i 420mo pamięci RAM ( Plunker )
Z ngRepeat i modułem @OverZealous: 7s dla 2000 wierszy i 240mo pamięci RAM ( Plunker )
Z ngRepeat i dyrektywą @Connor: 8s dla 2000 wierszy i 500mo pamięci RAM ( Plunker )
Przeprowadziłem testy w Google Chrome 32.
źródło
angular-once
porównać. Dzięki.angular-once
pakietu (zamieściłem go tutaj jako alternatywną opcję).Jako alternatywę dostępny jest
angular-once
pakiet:angular-once
został zainspirowanybindonce
i zapewnia podobneonce-*
cechy:<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>
źródło