Complementing the answers trying to explain Why and How should we use the expression.
Methods of use
In addition to classic use with {{::meuModelo}}
can also be used through the ngBind
directive: <span ng-bind="::meuValor"></span>
Why use?
Every time we make the declaration of {{meuValor}}
in the view, a new watcher
is generated. In every cycle of digest()
the AngularJS will compare the old value of the watcher with the new value and make the update, if they are different. When we use ::
we are telling AngularJS
not to re-evaluate that watcher
and this will increase the speed of the application, since there will be a smaller watchers
to be analyzed.
Examples of use
We must use OneWay Databind or ::
whenever we are sure that a given data will not change within the application, if there is any possibility that the data can be changed, standard usage.
The most common use is with the ngRepeat
directive, which is the one that generates the number of watchers
and there is also a different usage mode, since we can apply not only the value of an object of an array , as an entire array. See:
$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>
In this example, if you are sure that the address data such as the city name can not be changed, you can use: {{::endereco.cidade}}
In the same example, if you are also sure that the entire list of addresses will not change, you can combine and have a code like this:
<li ng-repeat="endereco in ::$scope.listaEndereco track by ::endereco.id">{{::endereco.cidade}}</li>
In this way the whole scope will be disregarded of the cycle and not only the value of the name of the city only.
This is very useful when working with large lists and using ngRepeat
, which is the biggest impact on watchers
generation.