Hintergrundeinführung
Dieses Beispiel ist ein Beispiel im Video, es gibt einen dynamischen Superman mit drei Fähigkeiten, Festigkeit, Geschwindigkeitsgeschwindigkeit, Glühlicht.
Diese drei Fähigkeiten werden als drei Attribute verwendet und definieren dynamischen Superman als Tag. Sie können diese Fähigkeit haben, indem Sie die entsprechenden Attribute hinzufügen.
Um die Anzeige von Ergebnissen zu erleichtern, fügen Sie dem Tag ein Mausreaktionsereignis hinzu. Wenn sich die Maus zum entsprechenden Tag bewegt, wird eine Methode ausgelöst, um die Funktionen auszudrucken, die sie hat.
Programmanalyse
Der Code für den HTML -Teil lautet wie folgt:
<Div> <uperman> Nichts! </Superman> <Superman Stärke> Stärke!
Mal sehen, wie es implementiert werden kann. Das erste ist, ein Modul zu erstellen:
var myappmodule = angular.module ("myapp", []);
Erstellen Sie auf der Grundlage dieses Moduls den Tag -Superman, ähnlich dem vorherigen.
MyAppModule.directive ("Superman", function () {return {scope: {}, begrenzt: 'ae', übersetzen: true, template: "<div> <div ng-transclude> </div> </div>", controller: function ($ scope) {$ scope.abiles = []; }; });Der Unterschied besteht darin, dass es innerhalb der Methode ein Controller -Attribut gibt. Dies ist kein Controller wie NG-Controller, sondern eine Schnittstelle, dass die Anweisungen von außen geöffnet sind. Die im Inneren deklarierten Methoden können extern als öffentliche Methoden verwendet werden, und andere Anweisungen können diese Methoden durch Abhängigkeiten verwenden.
Erstellen Sie als nächstes drei Befehle, die den Funktionen entsprechen
MyAppModule.directive ("Stärke", function () {return {fordere: '^Superman', Link: Funktion (Scope, Element, Attr, SuperMancTrl) {superManctrl.addStrength ();}}}); myAppmodule.directive ("speed", function () {return {forder: '^Superman', link: function (scope, element, attr, superManctrl) {superManctrl.addSpeed ();}}}); myAppmodule.directive ("light", function () {return {fordern: '^Superman', link: function (Scope, Element, Attr, SuperMancTrl) {superManctrl.addlight ();}}});Die Codes der drei Anweisungen sind nahezu gleich, wobei die Forderung die abhängigen Anweisungen angibt.
Im Link befindet sich ein zusätzlicher Parameter -Supermanctrl. Dieser Parameter ist als Controller in Superman gedacht, daher ist die Benennungsmethode Superman+Strg.
[Da ich die internen Prinzipien nicht verstehe, ist dies nur eine Vermutung, aber Experimente haben gezeigt, dass ein Fehler gemeldet wird, wenn der Name dieses Parameters geändert wird. 】
Nachdem Sie diese drei Anweisungen deklariert haben, können Sie diese drei Anweisungen als Superattribute verwenden. Wenn dieses Attribut angegeben ist, wird die interne Methode innerhalb der Verbindung ausgelöst und die in Superman offengelegten Methoden werden aufgerufen.
Zusammenfassend lässt sich sagen, dass der interaktive Prozess der Anweisungen:
1 Erstellen Sie zunächst eine grundlegende Richtlinie und fügen Sie nach dem Controller -Attribut die Methode hinzu, die der Öffentlichkeit offenbart wurde.
2 Erstellen Sie andere interaktive Anweisungen, fügen Sie die entsprechende Anweisungsabhängigkeit nach dem Forderungsattribut hinzu. Rufen Sie die freiliegende Methode im Link auf
Alle Programmcodes:
<! docType html> <html ng-app = "myapp"> <kopf> <meta http-äquiv = "content-type" content = "text /html; charSet = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div> <Superman> Nichts! Speed Light! </Superman> </div> <skript type = "text/javaScript"> var myappmodule = angular.module ("myApp", []); MyAppModule.directive ("Superman", function () {return {scope: {}, begrenzt: 'ae', übersetzen: true, template: "<div> <div ng-transclude> </div> </div>", controller: function ($ scope) {$ scope.abiles = []; }; }); MyAppModule.directive ("Stärke", function () {return {fordere: '^Superman', Link: Funktion (Scope, Element, Attr, SuperMancTrl) {superManctrl.addStrength ();}}}); myAppmodule.directive ("speed", function () {return {forder: '^Superman', link: function (scope, element, attr, superManctrl) {superManctrl.addSpeed ();}}}); myAppmodule.directive ("light", function () {return {fordern: '^Superman', link: function (Scope, Element, Attr, SuperMancTrl) {superManctrl.addlight ();}}}); </script> </body> </html>Auslaufergebnisse:
Das obige ist die Informationen zur Wechselwirkung von AngularJS -Anweisungen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!