Representar valor sin vinculación de datos

En AngularJS, ¿cómo puedo representar un valor sin enlace de datos bidireccional? Es posible que desee hacer esto por razones de rendimiento, o incluso generar un valor en un momento dado.

Los siguientes ejemplos utilizan ambos enlaces de datos:

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

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

¿Cómo renderizo value sin ningún enlace de datos?

Angular 1.3+

En 1.3, Angular lo ha admitido utilizando la siguiente sintaxis.

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

Como se menciona en esta respuesta .

Angular 1.2 y menos

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 unir una vez así

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

Puedes unir como de costumbre

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

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

Algunos de ustedes pueden estar usando batarang angular, y como se menciona en los comentarios, si usa esta directiva, el elemento todavía se muestra como vinculante cuando no lo es, estoy bastante seguro de que esto tiene algo que ver con las clases que están adjuntas al elemento, por lo que intente 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 TOC y desea eliminar el classatributo vacío, haga esto

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

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

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

Encuadernación única

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

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

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

Esta biblioteca le permite renderizar elementos que están enlazados solo una vez, cuando se inicializan por primera vez. Se ignorará cualquier actualización adicional de esos valores. Es una excelente manera de reducir la cantidad de reproducciones en la página para las cosas que no cambiarán después de su procesamiento.

Ejemplo de uso:

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

Cuando se usa así, la propiedad debajo valuese establecerá una vez que esté disponible, pero luego el reloj se desactivará.

Comparación entre @OverZealous y @Connor responde:

Con el ngRepeat tradicional de 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.

Como alternativa, hay angular-oncepaquete:

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

angular-oncese inspiró en realidad bindoncey proporciona once-*atributos similares :

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