Portée angularjs (portée)
La portée est le lien entre HTML (View) et JavaScript (contrôleur).
La portée est un objet avec des méthodes et des propriétés disponibles.
La portée peut être appliquée sur les vues et les contrôleurs.
Comment utiliser la portée
Lorsque vous créez un contrôleur dans AngularJS, vous pouvez passer l'objet $ Scope comme paramètre:
Instance angularjs
Les propriétés du contrôleur correspondent aux propriétés de la vue:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "myctrl"> {{carname}} </div> <cript> var app = angular.module ('myApp', []); app.controller ('myctrl', fonction ($ scope) {$ scope.carname = "Volvo";}); </script> <p> Le nom utilisé dans la vue dans {{}}. </p> </ body> </ htmlRésultats en cours:
Volvo
Créez un nom d'attribut "carname" dans le contrôleur, qui correspond au nom utilisé dans la vue dans {{}}.
Lors de l'ajout d'un objet Scope $ au contrôleur, la vue (HTML) peut obtenir ces propriétés.
Dans la vue, vous n'avez pas besoin d'ajouter le préfixe de Scope $, il vous suffit d'ajouter le nom d'attribut, tel que: {{carname}}.
Présentation de la portée
La composition d'application AngularJS est la suivante:
Afficher (voir), c'est-à-dire HTML.
Modèle, données disponibles dans la vue actuelle.
Le contrôleur, c'est-à-dire la fonction JavaScript, peut ajouter ou modifier les propriétés.
La portée est le modèle.
La portée est un objet JavaScript avec des propriétés et des méthodes qui peuvent être utilisées dans les vues et les contrôleurs.
Instance angularjs
Si vous modifiez la vue, le modèle et le contrôleur seront également mis à jour en conséquence:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controlller = "myctrl"> <entrée ng-model = "name"> mon nom est {{name}} </div> <script> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.name = "John Doe";}); La boîte d'entrée, elle affectera le modèle et, bien sûr, il affectera également la valeur d'attribut correspondante du contrôleur. </p> </ body> </html>Résultats en cours:
Je m'appelle John Doe
Lorsque vous modifiez la valeur dans la zone d'entrée, elle affectera le modèle et bien sûr, il affectera également la valeur d'attribut correspondante du contrôleur.
Portée
Il est très important de connaître la portée que vous utilisez actuellement.
Dans les deux instances ci-dessus, il n'y a qu'une seule portée de portée, il est donc relativement simple à traiter. Cependant, dans les grands projets, il existe plusieurs portées dans le DOM HTML. Pour le moment, vous devez savoir quelle portée correspondant à la portée que vous utilisez.
Instance angularjs
Lorsque nous utilisons la directive NG-Repeat, chaque duplicata accède à l'objet en double actuel:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controlller = "myctrl"> <ul> <li ng-repeat = "x in noms"> {{x}} </li> </ul> </div> <cript> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.names = [emil "," tobias " "Linus"];}); </cript> </ body> </html>Résultats en cours:
Chaque élément <li> peut accéder à l'objet en double actuel, qui correspond à une chaîne, et est représenté par la variable x.
Portée des racines
Toutes les applications ont un $ Rootscope qui peut être utilisé dans tous les éléments HTML contenus dans la directive NG-App.
$rootScope can be used throughout the application. C'est le pont de la portée de chaque contrôleur. Les valeurs définies avec Rootscope peuvent être utilisées dans chaque contrôleur.
Instance angularjs
Lors de la création d'un contrôleur, passez $ rootscope comme paramètre et peut être utilisé dans l'application:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </-head> <body> <div ng-app = "myapp" ng-consroll = "MYCTRL"> <div ng-app = "MyAppr" ng-ConsrOr = "MYCTRL"> <Div Ng-App = "MyAppr" Ng-ContrOler = "MYCTRL"> THE Le nom de famille est {{LastName}} Membres de la famille: <ul> <li ng-repeat = "x in noms"> {{x}} {{LastName}} </li> </ul> </div> <script> var app = angular.module ('myapp', []); app.Controller ('MycTrl', fure $ scope.names = ["emil", "tobias", "linus"]; $ rootscope.lastName = "Refsnes";}); </cript> <p> Notez que $ rootscope est accessible à l'intérieur et à l'extérieur de l'objet Loop. </p></body></html>Résultats en cours:
Le nom de famille est membre de la famille Refsnes:
Notez que $ Rootscope est accessible à l'intérieur et à l'extérieur de l'objet de boucle.