Valor de renderização sem vinculação de dados

No AngularJS, como posso renderizar um valor sem binding de dados bidirecional? Pode-se querer fazer isso por razões de desempenho, ou até mesmo renderizar um valor em um determinado ponto no tempo.

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

{{value}}

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

Angular 1.3+

Em 1.3, o Angular suportou isso usando a seguinte syntax.

 
{{::message}}

Como mencionado nesta resposta .


Angular 1.2 e abaixo

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

Esta pequena diretiva irá 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

 
I bind once - {{message}}

Você pode ligar como normal

 

Demonstração: http://jsfiddle.net/fffnb/

Alguns de vocês podem estar usando batarang angular, e como mencionado nos comentários se você usar esta diretiva o elemento ainda mostra como binding quando não é, eu tenho certeza que isso tem algo a ver com as classs que são anexadas ao elemento assim tente 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 OCD e deseja remover o atributo de class vazio, faça isso

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

Parece que o Angular 1.3 (começando com o beta 10) tem uma binding única incorporada:

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

Ligação única

Uma expressão que começa com :: é considerada uma expressão única. Expressões únicas pararã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á include o arquivo JS e adicioná-lo como uma dependência ao seu módulo de aplicativo:

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

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

Exemplo de uso:

 

Quando usado assim, a propriedade sob o value será definida assim que estiver disponível, mas o relógio será desativado.

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

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

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

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

Fiz meus testes com o Google Chrome 32.

Como alternativa, existe angular-once pacote angular-once :

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

angular-once foi realmente inspirado pelo bindonce e fornece atributos semelhantes de bindonce once-* :