AngularJS admite propiedades de etiqueta definidas por el usuario y agregue contenido personalizado sin usar operaciones de nodo DOM.
Las cuatro características principales de AngularJS se mencionan anteriormente:
1 MVC
2 modular
3 instrucciones
4 enlace de datos de dos vías
Se introducirá lo siguiente:
1 Cómo personalizar el comando
2 Uso de instrucciones personalizadas
3 Uso en línea de directivas personalizadas
Cómo personalizar las directivas:
Angular es un marco basado en el módulo, por lo que debe crear su propio módulo:
var myAppModule = angular.module ("myApp", []);
Luego cree una directiva en este módulo
myAppModule.Directive ("xingoo", function () {return {restrict: 'aecm', plantlate: '<div> hola mi directiva </div>', reemplazo: true}});Entre ellos, Xingoo es el nombre de nuestra etiqueta personalizada, seguido de su función de método.
La función devuelve una combinación de par de valor clave, que define los métodos de uso, propiedades, etc. de la etiqueta.
Veamos qué define:
1 Restringir: Define los métodos de uso de las etiquetas, con un total de cuatro tipos, a saber, AECM
2 Plantilla: Defina la plantilla para la etiqueta. En el interior hay una cadena utilizada para reemplazar etiquetas personalizadas
3 Reemplazo: si admitir el reemplazo
4 Transcluir: si admitir incrustado
Cómo usar el comando:
Las cuatro formas mencionadas anteriormente de usar etiquetas, a saber, AECM.
Un atributo: utilizado como atributo
<div xingoo> </div>
Elemento E: utilizado como elemento de etiqueta
<xingoo> </xingoo>
Clase C: utilizado como estilo CSS
<div> </div>
M Comentarios Comentarios: Usado como comentarios (este método no está disponible en la versión 1.2!)
<!-Directiva: Xingoo->
<div> </div>
En términos generales, se recomienda usarlo como atributos y elementos.
Cuando desee extender los atributos en las etiquetas HTML existentes, use el método de atributo.
Cuando desee personalizar la etiqueta, tome la forma de una etiqueta.
Para usar ese método, debe declarar la letra correspondiente en la restricción en la Directiva de definición.
Uso en línea de las directivas:
Debido a que otras etiquetas pueden anidarse dentro de la etiqueta, si desea anidar otras etiquetas de elementos en una etiqueta personalizada, necesita:
1 Use la propiedad Transclude, establecida en True.
2 y use la propiedad Ng-Transclude para definir la ubicación anidada interna.
El código es el siguiente:
myAppModule.Directive ("test", function () {return {restrict: 'aECM', traduce: true, plantate: "<iv> jaja! <div ng-transclude> </div> wuwu! </div>"}});Todos los códigos
<! 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> </head> <body> <xingoo> </ xingoo> <div xingoo> </div> <div> </div> <!-directive: xingoo-> <div> <hiv> <hrr> <xingoo> 3333 </xingoo> <hr> <pest> 4444 </test> <script type = "text/javaScript"> var myAppModule = angular.module ("myApp", []); myAppModule.Directive ("xingoo", function () {return {restrict: 'aecm', plantlate: '<div> hola mi directiva </div>', reemplazo: true}}); myAppModule.Directive ("test", function () {return {restrict: 'aECM', transclude: true, plantlate: "<iv> jaja! <div ng-transclude> </div> wuwu! </div>"}}); </script> </body> </html>Resultados de ejecución
Lo anterior es la información que clasifica las directivas personalizadas de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!