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

Se você não estiver usando o ng-bind , algo como isto:

 
 Hello, {{user.name}}  

talvez você veja o Hello, {{user.name}} por um segundo antes que user.name seja resolvido (antes que os dados sejam carregados)

Você poderia fazer algo assim

 
 Hello,   

se isso é um problema para você.

Outra solução é usar ng-cloak .

Visibilidade:

Enquanto o seu angularjs é bootstrapping, o usuário pode ver seus colchetes colocados no html. Isso pode ser feito com o ng-cloak . Mas para mim isso é uma solução alternativa, que eu não preciso usar, se eu usar ng-bind .

Atuação:

O {{}} é muito mais lento .

Este ng-bind é uma diretiva e colocará um observador na variável passada. Portanto, o ng-bind só será aplicado quando o valor passado for realmente alterado .

Os colchetes, por outro lado, estarão sujos, verificados e atualizados em todos os $digest , mesmo que não seja necessário .

No momento, estou criando um aplicativo de página única grande (~ 500 ligações por visualização). Mudar de {{}} para restrito ng-bind nos poupou cerca de 20% em cada scope.$digest .

Sugestão :

Se você usar um módulo de tradução como o angular-translate , sempre prefira diretivas antes da anotação de colchetes.

{{'WELCOME'|translate}} =>

Se você precisa de uma function de filtro, é melhor ir para uma diretiva, que na verdade apenas usa seu filtro personalizado. Documentação para o serviço de filtro $

ATUALIZAÇÃO 28.11.2014 (mas talvez fora do tópico):

Em Angular bindonce funcionalidade bindonce foi introduzida. Portanto, você pode ligar o valor de uma expressão / atributo uma vez (será ligado quando! = ‘Indefinido’).

Isso é útil quando você não espera que sua binding seja alterada.

Uso: lugar :: antes de sua binding:

 
 
{{item}}
 
   

Exemplo:

ng-repeat para produzir alguns dados na tabela, com várias ligações por linha. Ligações de tradução, saídas de filtro, que são executadas em todos os resumos de escopo.

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

Por exemplo, você poderia fazer:

 
 Hello, {{variable}}  

Isso significa que todo o texto Hello, {{variable}} delimitado por

será copiado e armazenado na memory.

Se você fizer algo assim:

 
 Hello,   

Somente o valor do valor será armazenado na memory e o angular registrará um observador (expressão de observação) que consiste apenas na variável.

Basicamente, a syntax de duas cadeias é mais naturalmente legível e requer menos digitação.

Ambos os casos produzem a mesma saída, mas se você optar por {{}} há uma chance de o usuário ver por alguns milissegundos o {{}} antes que seu modelo seja processado por angular. Então, se você notar qualquer {{}} , é melhor usar o ng-bind .

Também é muito importante que apenas no seu index.html do seu aplicativo angular você possa ter renderizado {{}} . Se você estiver usando diretivas de modo que os modelos, não há chance de ver isso porque angular primeiro renderizar o modelo e depois anexá-lo ao DOM.

Isso ocorre porque, com {{}} o compilador angular considera o nó de texto e seu pai, já que existe a possibilidade de mesclar 2 nós {{}} . Portanto, há links adicionais que aumentam o tempo de carregamento. 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, isso causará um impacto no ambiente de tempo de execução mais lento.

{{...}} significa união de dados bidirecional. Mas, ng-bind é, na verdade, destinado à vinculação de dados unidirecional.

Usar o ng-bind reduzirá o número de observadores na sua página. Por isso, ng-bind será mais rápido que {{...}} . Portanto, se você quiser apenas exibir um valor e suas atualizações, e não quiser refletir sua alteração da interface do usuário de volta ao controlador, vá para ng-bind . Isso aumentará o desempenho da página e reduzirá o tempo de carregamento da página.

 
 Hello,   

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

Quando a sua página não está carregada ou quando a sua internet está lenta ou quando o seu site está carregado pela metade, então você pode ver este tipo de problemas (Verifique a captura da canvas com a marca de leitura) será acionado na canvas que está completamente conectada. Para evitar isso devemos Ng-bind

O ng-bind também tem seus problemas. Quando você tenta usar filtros angulares, limite ou outra coisa, você pode ter problemas se usar o ng-bind . Mas em outros casos, ng-bind é melhor em UX side.when usuário abre uma página, ele verá (10ms-100ms) que imprime símbolos ( {{…}} ), é por isso que ng-bind é melhor .

Há algum problema de cintilação em {{}} como quando você atualiza a página, em seguida, para um curto período de tempo de spam é visto. Então, devemos usar ng-bind em vez de expressão para representação de dados.

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

Por exemplo, '' será exibido como uma string e não será executado.

De acordo com o Angular Doc:
Como ngBind é um atributo de elemento, ele torna as ligações invisíveis para o usuário enquanto a página está carregando … é a principal diferença …

Basicamente até que todos os elementos dom não sejam carregados, não podemos vê-los e porque ngBind é atributo no elemento, ele aguarda até que os doms entrem em jogo … mais informações abaixo

ngBind
– diretiva no módulo ng

O atributo ngBind diz ao AngularJS para replace o conteúdo de texto do elemento HTML especificado pelo valor de uma determinada expressão e para atualizar o conteúdo do texto quando o valor dessa expressão é alterado.

Normalmente, você não usa ngBind diretamente , mas usa a marcação dupla encaracolada como {{expression}}, que é semelhante, mas menos detalhada.

É preferível usar ngBind em vez de {{expression}} se um modelo for exibido momentaneamente pelo navegador em seu estado bruto antes que o AngularJS o compile. Como ngBind é um atributo de elemento, ele torna as ligações invisíveis para o usuário enquanto a página está sendo carregada.

Uma solução alternativa para esse problema seria usar a diretiva ngCloak . visite 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 :

ou faça a interpolação como abaixo:

 
{{my.name}} 

ou desta forma com atributos ng-cloak em AngularJs:

 
{{my.name}} 

ng-manto evite piscar no dom e espere até que tudo esteja pronto! isso é igual ao atributo ng-bind …

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

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