Looking for angularjs Keywords? Try Ask4Keywords

AngularJSDirectivas personalizadas


Introducción

Aquí aprenderá sobre la característica de directivas de AngularJS. A continuación encontrará información sobre qué son las directivas, así como ejemplos básicos y avanzados de cómo usarlas.

Parámetros

Parámetro Detalles
alcance Propiedad para establecer el alcance de la directiva. Se puede establecer como falso, verdadero o como un alcance aislado: {@, =, <, &}.
alcance: falsy La directiva utiliza el ámbito primario. No hay ámbito creado para directiva.
alcance: verdadero La directiva hereda prototípicamente el ámbito principal como nuevo ámbito secundario. Si hay varias directivas en el mismo elemento que solicitan un nuevo alcance, entonces compartirán un nuevo alcance.
alcance: {@} Enlace unidireccional de una propiedad de ámbito de directiva a un valor de atributo DOM. A medida que el valor del atributo se enlaza en el padre, cambiará en el ámbito de la directiva.
alcance: {=} Enlace de atributo bidireccional que cambia el atributo en el padre primario si el atributo de la directiva cambia y viceversa.
alcance: {<} Enlace unidireccional de una propiedad de ámbito de directiva y una expresión de atributo DOM. La expresión se evalúa en el padre. Esto vigila la identidad del valor principal, por lo que los cambios en una propiedad de objeto en el elemento primario no se reflejarán en la directiva. Los cambios en una propiedad de objeto en una directiva se reflejarán en el elemento primario, ya que ambos hacen referencia al mismo objeto
alcance: {&} Permite que la directiva pase datos a una expresión para ser evaluada en el padre.
compilar: función Esta función se utiliza para realizar la transformación DOM en la plantilla directiva antes de que se ejecute la función de enlace. Acepta tElement (la plantilla de directiva) y tAttr (lista de atributos declarados en la directiva). No tiene acceso al ámbito de aplicación. Puede devolver una función que se registrará como una función de post-link o puede devolver un objeto con propiedades pre y post con el que se registrará como funciones de post-link pre-link y post-link .
enlace: función / objeto La propiedad de enlace se puede configurar como una función u objeto. Puede recibir los siguientes argumentos: alcance (ámbito de la directiva), iElement (elemento DOM donde se aplica la directiva), iAttrs (colección de atributos del elemento DOM), controlador (matriz de controladores requeridos por la directiva), transcludeFn. Se utiliza principalmente para configurar escuchas de DOM, ver las propiedades del modelo en busca de cambios y actualizar el DOM. Se ejecuta después de clonar la plantilla. Se configura de forma independiente si no hay una función de compilación.
función de enlace previo Función de enlace que se ejecuta antes que cualquier función de enlace hijo. De forma predeterminada, las funciones de enlace de directiva secundaria se ejecutan antes que las funciones de enlace de directiva principal y la función de enlace previo permite al enlace primario primero. Un caso de uso es si el niño requiere datos del padre.
función de enlace posterior Función de enlace que los ejecutivos después de los elementos secundarios están vinculados al padre. Por lo general, se usa para adjuntar controladores de eventos y acceder a directivas secundarias, pero los datos requeridos por la directiva secundaria no deben establecerse aquí porque la directiva secundaria ya estará vinculada.
restringir: cadena Define cómo llamar a la directiva desde el DOM. Valores posibles (Suponiendo que nuestro nombre de directiva sea demoDirective ): E - Nombre del elemento ( <demo-directive></demo-directive> ), A - Atributo ( <div demo-directive></div> ), C - Clase correspondiente ( <div class="demo-directive"></div> ), M - Por comentario ( <!-- directive: demo-directive --> ). La propiedad de restrict también puede admitir múltiples opciones, por ejemplo, restrict: "AC" restringirá la directiva a Atributo O Clase . Si se omite, el valor predeterminado es "EA" (Elemento o Atributo).
requiere: 'demoDirective' Localice el controlador de demoDirective en el elemento actual e inyecte su controlador como el cuarto argumento de la función de enlace. Lanzar un error si no se encuentra.
requiere: '? demoDirective' Intente ubicar el controlador demoDirective o pase el nulo al enlace fn si no lo encuentra.
requiere: '^ demoDirective' Localice el controlador de demoDirective buscando el elemento y sus padres. Lanzar un error si no se encuentra.
requiere: '^^ demoDirective' Localice el controlador de demoDirective buscando los padres del elemento. Lanzar un error si no se encuentra.
requiere: '? ^ demoDirective' Intente ubicar el controlador de demoDirective buscando el elemento y sus padres o pase el nulo al enlace fn si no lo encuentra.
require: '? ^^ demoDirective' Intente localizar el controlador de demoDirective buscando los elementos principales del elemento, o pase el nulo al enlace fn si no lo encuentra.

Directivas personalizadas Ejemplos relacionados