Syntaxe
|
<element ng-bind="expression"></element>
|
Syntaxe par attribut |
|
<element class="ng-bind: expression"></element>
|
Syntaxe par classe |
Paramètres
| Nom |
Description |
| element |
Ce paramètre permet d'indiquer une balise. |
| expression |
Ce paramètre permet d'indiquer une variable ou une expression à évaluer. |
Description
Cette directive permet d'indiquer la liaison du contenu d'un élément HTML vers les données d'application.
Remarques
- Remplacement du contenu d'un élément : La directive ng-bind lie une expression AngularJS à un élément HTML.
Elle remplace automatiquement le contenu de l'élément avec la valeur de l'expression évaluée, sans nécessiter de balises doubles accolades {{ }}.
- Élimination du "flash de contenu non traité" (FOUC) : Contrairement aux accolades {{ }}, ng-bind prévient le flash de contenu non traité visible
avant que l'expression AngularJS soit compilée. Cela améliore l'expérience utilisateur, en particulier dans les pages chargées lentement.
- Usage recommandé pour les performances : L'utilisation de ng-bind est préférable dans certains cas, car elle ne nécessite pas de watcher
supplémentaire pour détecter les changements dans le DOM. Cela peut réduire les coûts de performance par rapport à une liaison
classique avec les accolades.
- Expression AngularJS dynamique : L'expression utilisée dans ng-bind peut contenir des variables, des appels de fonctions ou des expressions
logiques, et elle est évaluée dynamiquement chaque fois que le modèle est mis à jour.
- Équivalent à une liaison unidirectionnelle : La liaison effectuée par ng-bind est unidirectionnelle : elle met à jour l'affichage en fonction du
modèle, mais elle ne reflète pas les modifications effectuées dans l'interface utilisateur vers le modèle.
- Limité à du texte brut : ng-bind insère du texte brut dans l'élément HTML, ce qui signifie qu'il ne traite
pas le HTML ou les balises incluses dans l'expression. Pour afficher du contenu HTML,
il faut utiliser ng-bind-html avec la dépendance ngSanitize.
- Compatible avec divers types d'éléments : Bien que couramment utilisé sur des balises comme <span> ou
<div>, ng-bind fonctionne avec presque tous les types d'éléments HTML, tels
que <p>, <h1>, et même des attributs comme les légendes de boutons.
- Alternative plus claire que les accolades dans le code : L'utilisation de ng-bind peut rendre le code HTML
plus lisible, surtout lorsque plusieurs expressions AngularJS sont utilisées dans un même fichier. Cela évite l'encombrement visuel causé par des accolades multiples.
Dernière mise à jour : Dimanche, le 9 décembre 2018
