AngularJS 1.3 bind once

Le "two way data binding" est un des gros atouts d'AngularJS, en ce qu'il évite d'écrire le code qui lie une vue et un modèle en temps réel. Mais dans certains cas, ce two way binding peut dégrader les performances alors que l'on n'en a pas besoin. Angular 1.3 permet de créer un data binding unique sur des éléments qui ne nécessitent pas de two way binding.

Comment mettre en oeuvre bind once ? Simplemment en utilisant '::'. Ainsi :

{{product.description}}

devient

{{::product.description}}

product.description sera évalué durant un digest cycle jusqu'à ce qu'il soit défini. Dès qu'il est défini, on dit à AngularJS de ne plus le surveiller. Le DOM ne sera donc plus mis à jour pour ce watcher ci. Donc prudence : si vous souhaitez, par exemple, que le click sur un bouton permette d'incrémenter une valeur de votre modèle puis que la nouvelle valeur de votre modèle soit affichée en temps réel dans votre vue à chaque chaque fois que vous cliquez sur le bouton, n'utilisez PAS les '::'.

Vous pouvez utiliser bind once également dans votre code JavaScript :

$scope.$watch('::product')

product sera observé uniquement jusqu'à ce qu'il soit défini. Puis le watcher sera désactivé.