Die Schaffung des Controllers
Der AngularJS -Controller wird überall verwendet, und die Codedemonstration ist relativ einfach zu erstellen.
<! DocType html> <html xmlns = "http://www.w.org/xhtml" ng-app = "explodPleApp"> <kopf> <meta http-equiv = "content-type" content = "text/html; src = "Angular.js"> < /script> <link href = "bootstrap-theMe.css" rel = "styleSheet" /> <link href = "bootstrap.css" rel = "styleSheet" /> <script> angular.module("Exampleaps ", [). {$ scope.setInput = function (value) {console.log ("print:" + value);}}); </script> </head> <body ng-controller = "defaultCtrl"> <div> <h> count </h> <div> <Eingabe erforderlich ng-model ng-klick = "setInput (value)"> klicken </button> </div> </body> </html>Die Kontrolle ist sehr einfach. Zuerst habe ich HTML das NG-App-Attribut hinzugefügt, um den Umfang des Moduls anzuzeigen.
Ng-Controller zum Körper hinzugefügt, um den Umfang des DefaultCtrl-Controllers darzustellen.
Der Befehl ng-model in der Eingabenote ist Bindungsdaten, Zwei-Wege-Datenbindung (MVVM).
$ scope ist der eingebaute Umfang von AngularJs.
In diesem Beispiel wird nur der Eingangswert für die Konsole gedruckt, wie in der Abbildung gezeigt:
Das ist alles, es ist einfach.
Probleme mit mehreren Controller -Umfangsproblemen
Ändern wir nun das Programm.
<body> <div ng-controller = "defaultCtrl"> <h> count </h> <div> <Eingabe Erforderlich ng-model /> <button ng-klick = "setInput (value)"> klicken </button> </div> </body>
Der Rest des Codes bleibt unverändert, ich habe die Immobilien-NG-Controller einfach in die beiden Divs gesteckt. Ich habe den Standardctrl -Controller wiederverwendet. Ich denke, wenn ich den Inhalt im ersten Eingabetag eingehe und auf die Schaltfläche des zweiten Controllers klicke, wird das Ergebnis, das Sie erwarten, erscheint?
Ist das Ergebnis das gleiche wie das, was Sie von Ihnen halten? Sie können sehen, dass das Ergebnis undefiniert ist. In einer guten Erklärung sollte es sein, dass ihr Umfang anders ist. Obwohl Sie den Unified Controller wiederverwendet haben, ist der Bereich beim Erstellen tatsächlich anders.
Die angerufene Fabrikfunktion gibt verschiedene Bereiche zurück.
Wie kann man also zwischen verschiedenen Bereichen zugreifen? In AngularJS gibt es ein $ rootscope für den Zugang zu SCOPE.
Hier sind drei Funktionen zur Einführung.
$ on (Name, Handler) Registrieren Sie eine Ereignishandlerfunktion, die aufgerufen wird, wenn ein bestimmtes Ereignis vom aktuellen Bereich empfangen wird.
$ emit (name, args) sendet ein Ereignis an das aktuelle übergeordnete Bereich bis zum Stammbereich.
$ Broadcast (Name, Argumentation) sendet ein Ereignis an das Subscope unter dem aktuellen Bereich. Der Parameter ist der Ereignisname und ein Objekt, mit dem zusätzliche Daten für das Ereignis bereitgestellt werden.
Ändern Sie nun den folgenden Code:
<Script> Angular.module ("exphectPleApp", []). Controller ("defaultCtrl", Funktion ($ scope, $ rootScope) {$ scope. ZIP: Wert}); console.log ("print:" + $ scope.input);} $ scope.copy = function () {console.log ("kopieren:" + $ scope.input);};}); ng-klick = "copy ()"> kopieren </button> </div> </div>Im Segmentcode habe ich mehrere Funktionen hinzugefügt und gleichzeitig die Funktionen des zweiten Controllers geändert.
Ergebnis:
Es ist passiert.
Controller -Vererbung
<Script> angular.module ("explopleApp", []). Controller ("defaultCtrl", Funktion ($ scope, $ rootScope) {//$Scope.$on("UpdateValue ", Funktion (Ereignis, args) {// $ scope.input = args.zip; //}); {//$rootscope.$Broadcast("UpdateValue ", {ZIP: value}); {$ scope.copy = function () {console.log ("kopieren:" + $ scope.input);};}); </script> <body ng-controller = "defaultCtrl"> <div> <h> count </h> <div> <Eingabe erforderlich ng-model ng-click="setInput(value)">Click</button></div><div><div ng-controller="simpleCtrl"><h>Count</h><div><input required ng-model="value" /><button ng-click="copy()">Copy</button></div></div></body>Ich fügte einen Controller hinzu, und nach sorgfältiger Beobachtung von Simplektl stellte ich fest, dass defaultCtrl Simplectrl enthält, sodass die Funktion einfacher die Funktion erbt.
Ergebnisse: Als ich die Eingabe im ersten Fenster gepostet habe, änderte sich auch der zweite und sollte der gleiche Wert haben.
$ Scope Scope -Problem müssen Sie bei der Verwendung von Controller den Umfang verstehen.