La création du contrôleur
Le contrôleur AngularJS est utilisé partout et la démonstration du code est relativement simple à créer.
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleApp"> <adref> <meta http-equiv = "Content-Type" Content = "Text / html; charset = utf -" /> <Title> App </ Title> Apple src = "angular.js"> </ script> <link href = "bootstrap-theme.css" rel = "Stylesheet" /> <link href = "bootstrap.css" rel = "Stylesheet" /><script>angular.module("exampleapp ", []). {$ scope.setInput = function (valeur) {console.log ("print:" + value);}}); </cript> </ head> <body ng-controller = "defaultctrl"> <div> <h> count </h> <div> <entrée ng-model = "value" /> <bouton ng-Click = "setInput (valeur)"> Cliquez sur </ Button> </div> </ Body> </HTML>Le contrôle est très simple. Tout d'abord, j'ai ajouté l'attribut NG-App à HTML pour indiquer la portée du module.
Ajout d'un contrôleur NG au corps pour représenter la portée du contrôleur defaultctrl.
La commande ng model dans la note d'entrée est des données de liaison, liaison à deux voies de données (MVVM).
$ Scope est la portée intégrée d'AngularJS.
Cet exemple est simplement d'imprimer la valeur d'entrée à la console, comme indiqué sur la figure:
C'est tout, c'est simple.
Plusieurs problèmes de portée du contrôleur
Modifions maintenant le programme.
<body> <div ng-contrôleur = "defaultctrl"> <h> Count </h> <div> <entrée requis ng-model = "value" /> <button ng-Click = "setInput (valeur)"> cliquez </ bouton> </div> </div> <div ng-controlller = "Defaultctrl"> <h> Count </h> <div> <pult-moder = "Value =" Count <h> Count </h> /> <Button ng-Click = "setInput (valeur)"> Cliquez sur </ Button> </div> </body>
Le reste du code reste inchangé, je viens de mettre la propriété NG-Controller mis dans le corps dans les deux div. J'ai réutilisé le contrôleur defaultctrl. Je suppose que si j'entre du contenu dans la première balise d'entrée et que je clique sur le bouton du deuxième contrôleur, le résultat pour lequel vous vous attendez apparaîtra?
Le résultat est-il le même que ce que vous pensez de vous? Vous pouvez voir que le résultat n'est pas défini. Dans une bonne explication, il faut que leur portée soit différente. Bien que vous ayez réutilisé le contrôleur unifié, la portée est en effet différente lors de la création.
La fonction d'usine appelée renverra différentes lunettes.
Alors, comment accéder entre différentes lunettes? Dans AngularJS, il y a un $ Rootscope pour l'accès à la portée.
Voici trois fonctions à introduire.
$ on (nom, gestionnaire) Enregistrer une fonction de gestionnaire d'événements qui sera appelée lorsqu'un événement spécifique sera reçu par la portée actuelle.
$ Emit (nom, args) envoie un événement à la portée des parents actuelle jusqu'à la portée racine.
$ Broadcast (nom, args) envoie un événement à la sous -cope dans la portée actuelle, le paramètre est le nom de l'événement et un objet utilisé pour fournir des données supplémentaires à l'événement.
Modifiez maintenant le code suivant:
<Script> angular.module ("exampleApp", []). Controller ("DefaultCtrl", fonction ($ scope, $ rootscope) {$ scope. $ on ("updateValue", function (event, args) {$ scope.input = args.zip;}); $ Scope.SetInpt = Function (Value) {$ rootscope. $. zip: valeur}); console.log ("imprimer:" + $ scope.input);} $ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </cript> <div ng-controller = "Defaultctrl"> <h> count ng-click = "copy ()"> copy </utton> </div> </div>Dans le code du segment, j'ai ajouté plusieurs fonctions et modifié les fonctions du deuxième contrôleur en même temps.
résultat:
Cela s'est produit.
Héritage du contrôleur
<Script> angular.module ("exampleApp", []). Controller ("DefaultCtrl", fonction ($ scope, $ rootscope) {//$scope.$on("updateValue ", fonction (événement, args) {// $ scope.input = args.zip; //}); $ scope.setInput = fonction (valeur) ? {$ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </script> <corps ng-controller = "defaultctrl"> <div> <h> count </h> <div> <entrée Ng-model = "Value" /> <bouton ng-click = "setInput (valeur)"> cliquez </ bouton> </div> <v> <div ng-controlller = "Simplectrl"> <h> count </h> <v> <entrée requis ng-model = "value" /> <button ng-Click = "copy ()"> Copy </utton> </v> </div> </gock>J'ai ajouté un contrôleur, et après une observation minutieuse de Simplectrl, j'ai constaté que DefaultCtrl contient Simplectrl, donc la fonction simple hérite.
Résultats: Lorsque j'ai publié l'entrée dans la première fenêtre, la seconde a également changé, et ce devrait être la même valeur.
$ Problème de portée de la portée, vous devez comprendre sa portée lors de l'utilisation du contrôleur.