Dans cet article, nous allons comprendre quelle est la portée dans Angular JS et comment utiliser la portée. La portée dans Angular JS est la partie liante entre HTML (vue) et JavaScript (contrôleur) et c’est un objet intégré. Il contient des données d’application et des objets. Il est disponible à la fois pour la vue et le contrôleur. C’est un objet avec des propriétés et des méthodes disponibles. Il existe deux types de portées dans Angular JS.

Comment utiliser la portée ?

Lorsque nous créons un contrôleur dans AngularJS, nous passerons l’objet $scope en argument. Dans AngularJS, il crée et injecte un objet $scope différent dans chaque contrôleur d’une application. Ainsi, les données et méthodes attachées à $scope à l’intérieur d’un contrôleur ne sont pas accessibles sur un autre contrôleur. Au milieu du contrôleur imbriqué, le contrôleur enfant acquiert l’objet de portée du contrôleur parent. Par conséquent, le contrôleur enfant peut accéder aux propriétés ajoutées au contrôleur parent, mais le contrôleur parent ne peut pas accéder aux propriétés annexées au contrôleur enfant.

Comprendre la portée : Si nous voyons une application AngularJS qui se compose de :

• La vue HTML.
• Modèle, les données disponibles pour la vue actuelle.
• Contrôleur, la fonction JavaScript qui crée/modifie/supprime/contrôle les données.

La portée est le modèle et c’est un objet JavaScript avec des propriétés et des méthodes qui sont disponibles à la fois pour la vue et le contrôleur.

Exemple 1: Dans cet exemple, nous verrons l’utilisation de l’objet $scope et verrons également comment les données sont transférées du contrôleur au composant de vue qui est rendu en utilisant l’interpolation.

HTML

Sortir:

Les propriétés créées par le contrôleur peuvent être référencées dans la vue.

Exemple 2 : Dans l’exemple 1, nous n’avons utilisé qu’une seule portée, mais pour des applications plus importantes, qui peuvent être une section du DOM HTML pouvant accéder à certaines portées.

HTML

Sortir:

Dans l’exemple ci-dessus, il n’y a qu’une seule portée dans l’exemple ci-dessous, vous verrez plus d’une portée.

Portée racine : La portée racine est une portée créée sur l’élément HTML qui a la directive ng-app et qui est contenue dans toutes les applications. La disponibilité de la portée racine est dans l’ensemble de l’application.

Exemple 3 : Si une variable est déclarée avec le même nom dans la portée actuelle et la portée racine, la portée actuelle sera utilisée par l’application. Dans cet exemple, nous verrons comment la variable nommée « color » est utilisée par le scope courant.

HTML

Sortir:

Une variable nommée « color » existe à la fois dans la portée du contrôleur et dans la rootScope.