Introducción de fondo
Este ejemplo es un ejemplo en el video, hay un Superman dinámico, con tres habilidades, fuerza de fuerza, velocidad de velocidad, luz de brillo.
Estas tres habilidades se utilizan como tres atributos y definen Dynamic Superman como una etiqueta. Puede tener esta habilidad agregando los atributos correspondientes.
Para facilitar la visualización de resultados, agregue un evento de respuesta del mouse a la etiqueta. Cuando el mouse se mueve a la etiqueta correspondiente, se activará un método para imprimir las capacidades que tiene.
Análisis de programas
El código para la parte HTML es el siguiente:
<Viv> <Superman> Nothing! </Superman> <Superman Fuerza> Fuerza! </Superman> <Superman Fuerza Velocidad> Velocidad de fuerza! </Superman> <Luz de velocidad de la fuerza de Superman> ¡Luz de velocidad de fuerza! </Superman> </div>
Veamos cómo implementarlo. Lo primero es crear un módulo:
var myAppModule = angular.module ("myApp", []);
Sobre la base de este módulo, cree la etiqueta Superman, similar a la anterior.
myAppModule.Directive ("Superman", function () {return {scope: {}, restrict: 'ae', traducle: true, template: "<div> <div ng-transclude> </div> </div ng>", controlador: function ($ scope) {$ scope.Abities = []; this.addstrenz $ Scope.Abits.push ("Fuerza"); console.log (scope.Abities);La diferencia aquí es que hay un atributo de controlador dentro del método. Este no es un controlador como Ng-Controller, sino una interfaz que las instrucciones están abiertas al exterior. Los métodos declarados en el interior pueden usarse como métodos públicos externamente, y otras instrucciones pueden usar estos métodos a través de dependencias.
A continuación, cree tres comandos correspondientes a las capacidades
myAppModule.Directive ("fortaleza", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addrength ();}}}); myAppModule.Directive ("velocidad", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.Directive ("light", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}});Los códigos de las tres instrucciones son casi los mismos, donde se requiere especifica las instrucciones dependientes.
Hay un parámetro adicional supermancTRL en el enlace. Se considera que este parámetro es el controlador en Superman, por lo que el método de nomenclatura es Superman+CTRL.
[Debido a que no entiendo los principios internos, esto es solo una suposición, pero los experimentos han demostrado que si se cambia el nombre de este parámetro, se informará un error. 】
Después de declarar estas tres instrucciones, puede usar estas tres instrucciones como súper atributos. Cuando se indica este atributo, se activará el método interno dentro del enlace y se llamará a los métodos divulgados en Superman.
En resumen, el proceso interactivo de instrucciones:
1 Primero cree una directiva básica, y después del atributo del controlador, agregue el método divulgado al público.
2 Cree otras instrucciones interactivas, agregue la dependencia de la instrucción correspondiente después del atributo requerir; Llame al método expuesto en el enlace
Todos los códigos de programa:
<! DocType html> <html ng-app = "myApp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </toad> <body> <div> <superman> nada! </aPerman> <superman fortalent> fortaleza! </perman> <superman strength Strinding speed! </upermerman> <superman strengent spertsy spreefriess spreentse! </supermerman fortalent! </permerman> <superman strength> strinding speed! </upermerman> <superman strind strind spertion speed speed speed speT Velocidad de luz! </perman> </div> <script type = "text/javaScript"> var myAppModule = angular.module ("myApp", []); myAppModule.Directive ("Superman", function () {return {scope: {}, restrict: 'ae', traducle: true, template: "<div> <div ng-transclude> </div> </div ng>", controlador: function ($ scope) {$ scope.Abities = []; this.addstrenz $ Scope.Abits.push ("Fuerza"); console.log (scope.Abities); myAppModule.Directive ("fortaleza", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addrength ();}}}); myAppModule.Directive ("velocidad", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.Directive ("light", function () {return {request: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}}); </script> </body> </html>Resultados de ejecución:
Lo anterior es la información sobre la interacción de las instrucciones de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!