javascript - produccion - Renderizar valor sin vinculación de datos

render node js

Question

En AngularJS, ¿cómo puedo representar un valor sin enlace de datos bidireccional? Uno puede querer hacer esto por razones de rendimiento, o incluso generar un valor en un punto dado en el tiempo.

Los siguientes ejemplos usan enlace de datos:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

¿Cómo puedo representar el value sin ningún enlace de datos?

Answer 1

Como alternativa, hay angular-once paquete angular-once :

Si usa AngularJS, tiene problemas de rendimiento y necesita mostrar muchos datos de solo lectura, este proyecto es para usted.

angular-once fue realmente inspirado por bindonce y proporciona atributos similares once-* :

<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>

Answer 2

Comparación entre @OverZealous y @Connor responde:

Con la tradicional ngRepeat of angular: 15s para 2000 filas y 420mo de RAM ( Plunker )

Con ngRepeat y el módulo de @OverZealous: 7s para 2000 filas y 240mo de RAM ( Plunker )

Con ngRepeat y la directiva de @Connor: 8s para 2000 filas y 500mo de RAM ( Plunker )

Hice mis pruebas con Google Chrome 32.

Answer 3

Parece que Angular 1.3 (comenzando con beta 10) tiene un enlace único incorporado:

https://docs.angularjs.org/guide/expression#one-time-binding

Encuadernación de una sola vez

Una expresión que comienza con :: se considera una expresión de una sola vez. Las expresiones únicas dejarán de recalcular una vez que estén estables, lo que sucede después del primer resumen si el resultado de la expresión es un valor no indefinido (consulte el algoritmo de estabilización de valores a continuación).

Answer 4

Usa el módulo bindonce . Deberá incluir el archivo JS y agregarlo como una dependencia de su módulo de aplicación:

var myApp = angular.module("myApp", [''pasvaz.bindonce'']);

Esta biblioteca le permite representar elementos que están vinculados solo una vez, cuando se inicializan por primera vez. Cualquier otra actualización de esos valores será ignorada. Es una forma excelente de reducir el número de relojes en la página para las cosas que no cambiarán después de que se procesen.

Ejemplo de uso:

<div bo-text="value"></div>

Cuando se usa así, la propiedad que se encuentra debajo del value se establecerá una vez que esté disponible, pero luego se deshabilitará.

Answer 5

Angular 1.3+

En 1.3, Angular ha admitido esto usando la siguiente sintaxis.

<div>{{::message}}</div>

Como se menciona en esta respuesta .

Angular 1.2 y abajo

Esto es simple y no necesita un complemento. Mira esto.

Esta pequeña directiva logrará fácilmente lo que está tratando de lograr

app.directive(''bindOnce'', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Puedes enlazar una vez como este

<div bind-once>I bind once - {{message}}</div>

Puedes ligar como siempre

<div ng-bind="message" bind-once></div>

Demostración: http://jsfiddle.net/fffnb/

Algunos de ustedes pueden estar usando batarang angular, y como mencioné en los comentarios, si usan esta directiva el elemento aún se muestra como vinculante cuando no lo está, estoy bastante seguro de que esto tiene algo que ver con las clases que están adjuntas al elemento. prueba esto, debería funcionar (no probado) . Déjame saber en los comentarios si funcionó para ti.

app.directive(''bindOnce'', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass(''ng-binding ng-scope'');
            }, 0);
        }
    }
});

@x0b : si tiene OCD y quiere eliminar el atributo de class vacío class haga esto

!$element.attr(''class'') && $element.removeAttr(''class'')