Introduction de fond
Cet exemple est un exemple de la vidéo, il y a un Superman dynamique, avec trois capacités, la force de force, la vitesse de vitesse, la lumière brillante.
Ces trois capacités sont utilisées comme trois attributs et définissent Dynamic Superman comme une balise. Vous pouvez avoir cette capacité en ajoutant les attributs correspondants.
Pour faciliter l'affichage des résultats, ajoutez un événement de réponse de souris à la balise. Lorsque la souris se déplace vers la balise correspondante, une méthode sera déclenchée pour imprimer les capacités dont il dispose.
Analyse du programme
Le code de la pièce HTML est le suivant:
<div> <perman> Rien! </perman> <Superman Strength> Force! </perman> <Superman Specinte Speed> Speed Speed! </perman> <Superman Speed Speed Light> Speed Speed Light! </perman> </div>
Voyons comment l'implémenter. La première chose est de créer un module:
var myAppModule = angular.module ("myApp", []);
Sur la base de ce module, créez le tag Superman, similaire à celui précédent.
MyAppModule.Directive ("Superman", fonction () {return {scope: {}, restrect: 'ae', tradlate: true, modèle: "<div> <div ng-transclude> </div> </div>", contrôleur: fonction ($ scope) {$ scope.abilities = []; this.addStrong = function () {$ scope.abilities = ");); }; });La différence ici est qu'il y a un attribut de contrôleur à l'intérieur de la méthode. Ce n'est pas un contrôleur comme Ng-contrôleur, mais une interface pour les instructions à l'ouverture à l'extérieur. Les méthodes déclarées peuvent être utilisées à l'extérieur comme méthodes publiques, et d'autres instructions peuvent utiliser ces méthodes par des dépendances.
Ensuite, créez trois commandes correspondant aux capacités
MyAppModule.Directive ("Force", Function () {return {require: '^ Superman', lien: function (scope, élément, att, superManctrl) {superManctrl.AddStrength ();}}}); MyAppModule.Directive ("Speed", fonction () {return {require: '^ Superman', lien: function (scope, élément, attr, superManctrl) {superManctrl.Addspeed ();}}}); myAppModule.Directive ("Light", fonction () {return {require: '^ superman', lien: function (scope, élément, att, superManctrl) {superManctrl.Addlight ();}}});Les codes des trois instructions sont presque les mêmes, où l'exigent spécifie les instructions dépendantes.
Il y a un paramètre supplémentaire SuperManctrl dans le lien. Ce paramètre est deviné être le contrôleur de Superman, donc la méthode de dénomination est Superman + Ctrl.
[Parce que je ne comprends pas les principes internes, ce n'est qu'une supposition, mais les expériences ont prouvé que si le nom de ce paramètre est modifié, une erreur sera signalée. 】
Après avoir déclaré ces trois instructions, vous pouvez utiliser ces trois instructions comme super attributs. Lorsque cet attribut est indiqué, la méthode interne dans le lien sera déclenchée et les méthodes divulguées dans Superman seront appelées.
Pour résumer, le processus interactif des instructions:
1 Créez d'abord une directive de base, et après l'attribut de contrôleur, ajoutez la méthode divulguée au public.
2 Créez d'autres instructions interactives, ajoutez la dépendance d'instructions correspondante après l'attribut nécessaire; Appelez la méthode exposée dans le lien
Tous les codes du programme:
<! doctype html> <html ng-app = "myApp"> <éadf> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </ script> </ head> <body> <v> <perman> Rien! </perman> <Superman Strength> Forced! </perman> <Superman Specinte Speed! </perman> <Superman Speed Speed Speed Speed Speed Speed Speed Speed Speed! Speed Light! </ Superman> </div> <Script Type = "Text / JavaScript"> var MyAppModule = angular.module ("MyApp", []); MyAppModule.Directive ("Superman", fonction () {return {scope: {}, restrect: 'ae', tradlate: true, modèle: "<div> <div ng-transclude> </div> </div>", contrôleur: fonction ($ scope) {$ scope.abilities = []; this.addStrong = function () {$ scope.abilities = ");); }; }); MyAppModule.Directive ("Force", Function () {return {require: '^ Superman', lien: function (scope, élément, att, superManctrl) {superManctrl.AddStrength ();}}}); MyAppModule.Directive ("Speed", fonction () {return {require: '^ Superman', lien: function (scope, élément, attr, superManctrl) {superManctrl.Addspeed ();}}}); myAppModule.Directive ("Light", fonction () {return {require: '^ superman', lien: function (scope, élément, att, superManctrl) {superManctrl.Addlight ();}}}); </cript> </ body> </html>Résultats en cours:
Ce qui précède est les informations sur l'interaction des instructions AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!