AngularJS: por que ng-bind é melhor do que {{}} em angular?

Visibilidade:

Enquanto o seu angularjs está a iniciar, o utilizador poderá ver os seus parêntesis colocados no html. Isto pode ser tratado com ng-cloak. Mas para mim isto é uma solução que eu não preciso usar, se eu usar ng-bind.

Desempenho:

O {{}}é muito mais lento.

Esta ng-bindé uma directiva e colocará um observador na variável passada. Assim, o ng-bind só se aplicará quando o o valor passado muda realmente.

Os suportes, por outro lado, serão verificados por sujidade e actualizados em cada $digest, mesmo que não seja necessário.

Estou actualmente a construir uma grande aplicação de uma única página (~500 encadernações por vista). A mudança de {{}} para rigoroso ng-bind salvou-nos cerca de 20% em cada scope.$digest.

Sugestão:

Se usar um módulo de tradução como: angular-translate , prefira sempre directivas antes da anotação entre parênteses.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Se você precisa de uma função de filtro, é melhor ir para uma diretriz, que na verdade só usa o seu filtro personalizado. documentação para o serviço $filter

Actualizar 28.11.2014 (mas talvez fora do tópico):

No Angular 1.3 x foi introduzida a funcionalidade bindonce. Como tal, poderá associar o valor de uma expressão / atributo uma vez (será amarrado quando != "indefinido").

: Local :: antes da sua ligação:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Exemplo:

ng-repeat para enviar alguns dados na tabela, com múltiplas ligações por linha. Ligações de tradução, saídas de filtros, que são executadas em cada digestão de escopo.

ng-bind é melhor do que {{...}}

Por exemplo, você poderia fazer:

<div>
  Hello, {{variable}}
</div>

Se em vez disso fizeres algo assim:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Apenas o valor do valor será armazenado na memória, e angular registrará um observador (expressão de Vigia) que consiste apenas na variável.

Basicamente a sintaxe Double-curly é mais legível naturalmente e requer menos digitação.

Ambos os casos produzem a mesma produção, mas.. se optar por ir com {{}}, existe uma hipótese de o utilizador ver por alguns milissegundos o {{}} antes de o seu modelo ser representado por angular. Então se você notar algum {{}} então é melhor usar ng-bind.

Também muito importante é que só no seu índice.html da sua aplicação angular poderá ter o un-renderizado {{}}. Se estiver a utilizar directivas então então modelos, não há chance de ver isso porque angular primeiro renderiza o modelo e depois adiciona-lo ao DOM.

Isto acontece porque com {{}} o compilador angular considera tanto o nó de texto como o seu progenitor, uma vez que existe a possibilidade de fusão de 2 {{}} nós. Assim, há linkers adicionais que adicionam ao tempo de carga. Claro que para algumas dessas ocorrências a diferença é imaterial, no entanto, quando você está usando isso dentro de um repetidor de grande número de itens, ele vai causar um impacto em um ambiente de execução mais lento.

{{...}} significa ligação de dados bidireccional. Mas, ng-bind é realmente destinado para a ligação de dados de um só sentido.

Se utilizar ng-bind irá reduzir o número de observadores na sua página. Por isso a ng-bind será mais rápida que {{...}}. Então, se você só quiser mostrar um valor e suas atualizações, e não quiser refletir sua mudança de UI de volta para o controlador, então vá para ng-bind . Isto irá aumentar o desempenho da página e reduzir o tempo de carga da página.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

A razão pela qual o Ng-Bind é melhor porque,

Quando a sua página não estiver carregada ou a sua internet for lenta ou quando o seu site tiver carregado metade, poderá ver este tipo de questões (assinale a imagem com a marca de leitura) será despoletada no ecrã que está completamente ligado. Para evitar isso devemos Ng-bind

Ng-bind também tem os seus problemas.Quando você tentar usar filtros angulares , limit ou outra coisa qualquer, talvez possa ter problemas se utilizar ng-bind . Mas em outro caso, ng-bind é melhor do lado de UX.quando o usuário abre uma página, ele / ela verá (10ms-100ms) os símbolos de impressão ( {... É por isso que o ng-bind é melhor.

Existe algum problema em {{{}}} como quando você actualizar a página, então para um curto spam de expressão de tempo é seen.So devemos usar ng-bind em vez de expressão para a representação de dados.

ng-bind é também mais seguro porque representa html como uma cadeia.

Assim, por exemplo, '<script on*=maliciousCode()></script>' será mostrado como um texto e não será executado.

De acordo com o ângulo Doc:
Uma vez que o ngBind é um atributo do elemento, torna as ligações invisíveis para o utilizador enquanto a página está a carregar... é a principal diferença...

, Basicamente, até que cada dom elementos não carregado, não podemos vê-los e porque ngBind é atributo no elemento, aguarda até que o dom entram em jogo... mais informação em baixo

NgBind
- directiva no módulo

O ngBind atributo diz - AngularJS para substituir o conteúdo de texto do elemento HTML especificado com o valor de uma expressão dada, e para atualizar o conteúdo de texto quando o valor de que mudanças de expressão.

Normalmente, você não usar ngBind diretamente, mas em vez disso você usar o duplo encaracolados marcação como {{ expressão }} que é semelhante, mas menos detalhado.

É preferível utilizar ngBind em vez de {{{expressão }} se um template is momentaneamente displayed by the browser in its raw state before AngularJS compiles it. Uma vez que ngBind é um atributo do elemento, torna as ligações invisíveis para o usuário enquanto a página está carregando.

Uma solução alternativapara este problema seria usar a Directiva ngCloak. Visita aqui

Para mais informações sobre o ngbind visite esta página: https://docs.angularjs.org/api/ng/directive/ngBind

Você poderia fazer algo assim como atributo, ng-bind:

<div ng-bind="my.name"></div>

Ou fazer a interpolação do seguinte modo:

<div>{{my.name}}</div>

Ou desta forma com atributos ng-cloak em AngularJs:

<div id="my-name" ng-cloak>{{my.name}}</div>

Você pode se referir a este site que lhe dará uma explicação Qual é melhor como eu sei {{{}}} isto é mais lento do que ng-bind.

Http://corpus.hubwiz.com/2/angularjs/16125872.html consulte este site.