AngularJS : le scope

Pour faire le lien entre modèle, vue et controleur AngularJS fourni l’objet scope. La notion de scope permet de transporter le modèle entre la vue et le contrôleur. Chaque composant va gérer son propre scope en héritant du scope du composant parent ou du scope racine ($rootScope). Chaque scope peut voir les propriétés du parent.

Le lien avec la vue se fait via l’arbre DOM, un scope est toujours rattaché à un noeud de l’arbre DOM. Le scope racine lui est rattaché au noeud déclarant ng-app, l’attribut d’initialisation d’une application AngularJS. La plupart du temps l’attribut ng-app est déclaré dans la balise html mais il peut être déclarée n’importe où. Pour faciliter le debuggage il est possible d’accéder au scope via l’arbre DOM en appelant angular.element(aDOMElement).scope().

Le scope permet aussi d’interagir avec le data-binding : la méthode $watch(property, function) intercepte les modifications sur la propriété « property » du modèle et de déclenche la fonction « function« . La fonction $apply() permet de dispatcher ensuite la modification sur la vue.

Certaines directives entrainent la création d’un scope fils comme par exemple ng-controller ou ng-repeat. Ce n’est pas une obligation dans la création des directives. L’idée est de pouvoir isoler le comportement d’un composant dans certains cas.
Un bon exemple montrant le fonctionnement du scope est celui de la documentation, repris ci-dessous. Il utilise la fonctionnalité d’évènement du scope. Elle permet d’émettre un évènement soit vers les scopes parents : $emit, soit vers les scopes fils : $broadcast en appelant la fonction $on. L’exemple émet un évènement déclenchant un compteur, le compteur varie en fonction du scope ciblé.

La notion de scope est importante pour introduire les directives dans le prochain article.

Une réflexion sur « AngularJS : le scope »

Les commentaires sont fermés.