14

Vi que em alguma pergunta do SO em Inglês um código AngularJS que estava usando dois-pontos duplos antes da variável.

Exemplo:

{{ ::nome_variavel }}

O normal costuma ser:

{{ nome_variavel }}

Qual é a diferença entre ambos? Qual é a diferença da primeira sintaxe em relação à segunda?

1

4 Respostas 4

15

Complementando as respostas tentando explicar Por que e Como devemos usar a expressão.


Métodos de uso

Além do uso clássico com {{::meuModelo}} também pode ser usada através da diretiva ngBind: <span ng-bind="::meuValor"></span>

Por que usar?

Cada vez que fazemos a declaração de {{meuValor}} na view, um novo watcher é gerado. Em todo ciclo de digest() o AngularJS irá comparar o valor antigo do watcher com o novo valor e fazer a atualização, caso sejam diferentes. Quando usamos :: estamos dizendo ao AngularJS para não reavaliar aquele watcher e isso irá aumentar a velocidade da aplicação, uma vez que haverá um menor número watchers a ser analisado.

Exemplos de uso

Devemos usar OneWay Databind ou :: sempre que tivermos certeza de que um determinado dado não irá sofrer alteração dentro da aplicação, se houver alguma possibilidade de o dado poder ser alterado, deverá ser mantido seu uso padrão.

O uso mais comum é junto da diretiva ngRepeat, que é a que mais gera número de watchers e também há um modo de uso diferenciado, uma vez que podemos aplicar não só ao valor de um objeto de uma array, como a uma array inteira. Veja:

$scope.listaEndereco = [
    {id: 1, cidade: 'São Paulo', Estado: 'SP'},
    {id: 2, cidade: 'Rio de Janeiro', Estado: 'RJ'},
    {id: 3, cidade: 'Curitiba', Estado: 'PR'},
    ...
]

<ul>
    <li ng-repeat="endereco in $scope.listaEndereco track by endereco.id">{{endereco.cidade}}</li>
</ul>

Neste exemplo, se você tem certeza de que os dados dos endereços, como o nome da cidade, não puderem ser alterados, você pode usar: {{::endereco.cidade}}

No mesmo exemplo, se você também tem certeza de que a lista inteira de endereços não irá sofrer alterações, você pode combinar e ter um código assim:

<li ng-repeat="endereco in ::$scope.listaEndereco track by ::endereco.id">{{::endereco.cidade}}</li>

Deste modo todo o escopo será desconsiderado do ciclo e não só o valor do nome da cidade unicamente.

Isso é muito útil quando se trabalha com listas grandes e com o uso do ngRepeat, que é o maior impactante na geração de watchers.

13

O termo se chama one-time binding. Da documentação do Angular:

Uma expressão que começa com :: é considerada uma expressão de execução única. Estas expressões são avaliadas até seu valor se considerar estabilizado, o que acontece após o primeiro ciclo digest() caso o valor seja diferente de undefined.

Uma expressão é considerada estabilizada quando qualquer valor é retornado no ciclo digest(). Caso isso não aconteça, um monitor (watcher) fica reavaliando a expressão até que esta seja resolvida.

Fonte.

2
  • "Valor estabilizado" significa que passou de undefined para qualquer coisa? Commented 19/09/2016 às 17:21
  • 1
    @WallaceMaxters Adicionei a resposta à resposta. =)
    – OnoSendai
    Commented 19/09/2016 às 17:24
9

É o OneTimeBinding. Isso indica que assim que esse valor puder ser definido pelo framework ele já deve renderizar o conteúdo e não deve ficar tentando recalculá-lo. Assim ele se desliga do vínculo estabelecido (unbind). Note que o desligamento só ocorre quando tiver um valor definido.

Se não fizer isso ele ficará procurando o valor e pegará atualizações ocorridas no modelo, o que nem sempre é desejável. Pior ainda quando se sabe que valores não serão alterados. Não tem porque ele ficar insistindo em procurar por atualização. Obviamente um efeito interessante é uma melhor performance

Na documentação acima tem o algoritmo usado para definir quando deve parar.

Coloquei no GitHub para referência futura.

3

Qual é a diferença entre ambos? Qual é a diferença da primeira sintaxe em relação à segunda?

O "::" é chamado de One-time binding, a diferença é a capacidade de processar dados uma vez e deixá-lo persistir sem ser afetado por atualizações futuro modelo. Veja o exemplo da documentação: https://plnkr.co/edit/6WRPadO6HVzzNXiNXQve?p=preview

Referências:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .