What is the :: (two-point double) in Angularjs?

Question

I saw that in some OS question in English an Angularjs code that was using double-points before the variable.

Example:

{{ ::nome_variavel }}

The usual is:

{{ nome_variavel }}

What is the difference between the two? What is the difference between the first syntax and the second?

Answer 1

Complementing the answers trying to explain Why and Like we should use the expression.

---

Methods of use

In addition to the classic use with {{::meuModelo}} can also be used through the directive ngBind: <span ng-bind="::meuValor"></span>

Why use?

Every time we make the declaration of {{meuValor}} in view, a new watcher is generated. Throughout the digest() Angularjs will compare the old Watcher value to the new value and update it if different. When we use :: we’re telling the AngularJS not to re-evaluate that watcher and this will increase the speed of the application, since there will be a smaller number watchers to be analyzed.

Examples of use

We should use Oneway Databind or :: where we are certain that a given data will not change within the application, if there is any possibility that the data may be changed, its standard use shall be maintained.

The most common use is with the directive ngRepeat, which is the one that generates the most watchers and there is also a different mode of use, since we can apply not only to the value of an array object, but to 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 address data, such as city name, cannot be changed, you can use: {{::endereco.cidade}}

In the same example, if you are also sure that the entire address list will not be changed, 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 city name only.

This is very useful when working with large lists and with the use of ngRepeat, which is the most impactful in the generation of watchers.

Answer 2

The term is called one-time Binding. From the Angular documentation:

An expression that begins with :: is considered a single execution expression. These expressions are evaluated until their value is considered stabilized, which happens after the first cycle digest() if the value is different from Undefined.

An expression is considered stabilized when any value is returned in the cycle digest(). If not, a monitor (Watcher) is reevaluating the expression until it is resolved.

Source.

Answer 3

Is the Onetimebinding. This indicates that as soon as this value can be defined by framework it should already render the content and should not keep trying to recalculate it. So it disconnects from the established link (unbind). Note that shutdown only occurs when you have a set value.

If you don’t do this he will be looking for the value and will get updates in the model, which is not always desirable. Even worse when it is known that values will not be changed. There is no reason to insist on searching for an update. Obviously an interesting effect is a better performance

In the above documentation you have the algorithm used to define when to stop.

Answer 4

What is the difference between the two? What is the difference between the first syntax and the second?

The "::" is called One-time Binding, the difference is the ability to process data once and let it persist without being affected by future model updates. See the example of the documentation: https://plnkr.co/edit/6WRPadO6HVzzNXiNXQve?p=preview

References:

• Speeding up Angularjs
• Angularjs