What is the purpose of the :: (double colon) in the Angular?

12

I saw in some English SO question an AngularJS code that was using double colons before the variable.

Example:

{{ ::nome_variavel }}

The normal thing is:

{{ nome_variavel }}

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

    
asked by anonymous 19.09.2016 / 19:01

4 answers

14

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.

    
19.09.2016 / 19:43
13

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

  

An expression beginning with :: is considered a single-run expression. These expressions are evaluated to their value if they are stabilized, which happens after the first cycle digest() if the value is different from undefined .

An expression is considered to be stabilized when any value is returned in the digest() loop. If this does not happen, a monitor ( watcher ) is re-evaluating the expression until it is resolved.

Font .

    
19.09.2016 / 19:12
9

It's the OneTimeBinding . This indicates that once this value can be defined by the framework it should already render the content and should not be trying to recalculate it. Thus it detaches itself from the established bond ( unbind ). Note that shutdown only occurs when it has a set value.

If you do not do this, it will look for the value and get updates to the model, which is not always desirable. Even worse when you know that values will not change. You do not have to keep insisting on updating. Obviously an interesting effect is better performance

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

    
19.09.2016 / 19:12
3

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

The "::" is called a 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 documentation example: link

References:

19.09.2016 / 19:28