Renderizar valor sem vinculação de dados

No AngularJS, como posso renderizar um valor sem vinculação de dados bidirecional? Pode-se desejar fazer isso por motivos de desempenho ou até mesmo renderizando um valor em um determinado momento.

Os exemplos a seguir usam vinculação de dados:

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

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

Como faço para renderizar value sem qualquer vinculação de dados?

Angular 1.3+

No 1.3, o Angular oferece suporte para isso usando a seguinte sintaxe.

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

Conforme mencionado nesta resposta .

Angular 1.2 e abaixo

Isso é simples e não precisa de um plugin. Veja isso.

Esta pequena diretriz realizará facilmente o que você está tentando alcançar

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

Você pode ligar uma vez assim

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

Você pode ligar normalmente

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

Demo: http://jsfiddle.net/fffnb/

Alguns de vocês podem estar usando o batarang angular e, conforme mencionado nos comentários, se você usar esta diretiva, o elemento ainda mostra como vinculativo quando não é, tenho certeza que isso tem algo a ver com as classes que estão anexadas ao elemento. tente fazer isso, deve funcionar (não testado) . Deixe-me saber nos comentários se funcionou para você.

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

@ x0b : Se você tem TOC e deseja remover o classatributo vazio, faça isso

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

Parece que o Angular 1.3 (começando com beta 10) tem uma vinculação única integrada:

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

Encadernação única

Uma expressão que começa com :: é considerada uma expressão única. As expressões ocasionais deixarão de recalcular quando estiverem estáveis, o que acontece após o primeiro resumo se o resultado da expressão for um valor não indefinido (consulte o algoritmo de estabilização de valor abaixo).

Use o módulo bindonce . Você precisará incluir o arquivo JS e adicioná-lo como uma dependência ao módulo do aplicativo:

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

Esta biblioteca permite renderizar itens que são vinculados apenas uma vez - quando são inicializados pela primeira vez. Quaisquer outras atualizações desses valores serão ignoradas. É uma ótima maneira de reduzir o número de relógios na página para coisas que não mudarão depois de serem renderizadas.

Exemplo de uso:

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

Quando usado dessa forma, a propriedade em valueserá definida assim que estiver disponível, mas o relógio será desabilitado.

Comparação entre as respostas @OverZealous e @Connor:

Com o ngRepeat tradicional de angular: 15s para 2.000 linhas e 420mo de RAM ( Plunker )

Com ngRepeat e o módulo de @OverZealous: 7s para 2.000 linhas e 240mo de RAM ( Plunker )

Com ngRepeat e a diretiva de @Connor: 8s para 2.000 linhas e 500mo de RAM ( Plunker )

Fiz meus testes com o Google Chrome 32.

Como alternativa, existe o angular-oncepacote:

Se você usa AngularJS, tem problemas de desempenho e precisa exibir muitos dados somente leitura, este projeto é para você!

angular-oncefoi realmente inspirado bindoncee fornece once-*atributos semelhantes :

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