¿Por qué utilizar directivas AngularJS?
Actualmente, existen muchos productos JavaScript que proporcionan complementos para desarrolladores web. Por ejemplo, Bootstrap es un popular conjunto de herramientas de desarrollo front-end que proporciona complementos de estilo y JavaScript. Sin embargo, al utilizar complementos con Boottrap, los desarrolladores deben cambiar a JavaScript. Escriba código jQuery para activar el modo del complemento. Aunque el código jQuery es muy sencillo de escribir, debe sincronizarse con HTML, lo cual es un proceso tedioso y propenso a errores.
La página de inicio de AngularJS muestra un ejemplo simple de implementación de la función Tab en Bootstrap, que se puede agregar fácilmente a la página y es tan simple de usar como la etiqueta ul. El código HTML se ve así:
Copiar código
Componente de pestaña Bootstrap
Este es el contenido de la primera pestaña.
Este es el contenido de la segunda pestaña.
Copiar código
El código JavaScript es el siguiente:
Copiar código
angular. .
Directiva(pestañas, función(){
return {
límite: "E",
Sí,
Alcance: {},
Controlador: ["$alcance", función ($alcance){
var paneles = $alcance paneles = [];< /p >
$ alcance . seleccionar = función(panel){
angular.forEach(panel, función(panel){
panel.selected = false
p>
});
pane.selected = true
}
this . agregar panel = función (panel) {
if(panes.length==0)$ alcance.select(pane);
panes.push(pane);
}
} ],
Plantilla:
'
+
'
+
'
+
{ { panel título } }'+
'
+
'
+
'
+
'
,
Reemplazar: verdadero
};
}).
Instrucción (panel, función() {
Devolver {
Obligatorio :'^tabs',
Restricción: "E",
Sí,
Rango: {title:'@'},
Enlace: función (alcance, elemento, atributo, pestaña ctrl) {
tabsCtrl.addPane(alcance);
},
Plantilla:
'
+
'
,
Reemplazar: verdadero
} ;
})
Copiar código
Puedes comprobar el efecto desde el siguiente enlace: ment (el valor predeterminado es "a"). Nos centraremos más en las propiedades: cómo crear elementos de la interfaz de usuario.
Alcance: crea el alcance de la directiva. El alcance se pasa en la directiva como una etiqueta de atributo.
El alcance es un requisito para crear directivas reutilizables; cada directiva (independientemente de su nivel en directivas anidadas) tiene su propio alcance único que no depende del alcance principal. Un objeto de alcance define el nombre y el tipo de una variable. El ejemplo anterior crea tres variables de alcance.
Nombre: "@" (transferencia de valor, enlace unidireccional):
El símbolo "@" indica que la variable se pasa por valor. La directiva recupera el valor de la cadena pasada desde el ámbito principal. Las instrucciones pueden utilizar este valor pero no modificarlo, y es la variable más utilizada.
Cantidad: "=" (referencia, enlace bidireccional)
El símbolo "=" indica que la variable se pasa por referencia. La directiva recupera el valor de referencia en el ámbito principal. Los valores pueden ser de cualquier tipo, incluidos objetos compuestos y matrices. Las directivas pueden cambiar el valor en el ámbito principal, por lo que cuando la directiva necesita modificar el valor en el ámbito principal, debemos usar este tipo.
Guardar: "& amp (expresión)
"El símbolo & amp indica que la variable es una expresión activada en el ámbito principal. Permite que las instrucciones realicen operaciones más avanzadas que modificar valores.
Plantilla: Cadena que reemplaza las etiquetas de la plantilla original. La función de reemplazo reemplazará todos los elementos antiguos con nuevos valores. Observe cómo la plantilla utiliza variables definidas en Alcance. Esto le permite crear estilos de macro. No es necesario escribir ningún código adicional. Reemplazar: indica si se reemplaza o agrega el valor en la etiqueta original. El valor predeterminado es falso, en cuyo caso se conservará el marcado original.
Transcluir: Indica si la directiva personalizada copia el contenido de la etiqueta original. Por ejemplo, la directiva "tab" mostrada anteriormente se establece como verdadera porque el elemento tab contiene otros elementos HTML. La directiva "dateInput" debe estar vacía cuando se inicializa, por lo que transclude debe establecerse en falso.
Enlace: Este método juega un papel importante en la enseñanza. Es responsable de realizar operaciones DOM y registrar detectores de eventos. El método de enlace contiene los siguientes parámetros:
Alcance: una referencia al alcance de la directiva. La variable de alcance no está definida en el momento de la inicialización y el método de enlace registrará el evento de cambio de valor del monitor.
Elemento: Referencia al elemento DOM que contiene la directiva. El método de enlace generalmente es operado por una instancia de jQuery (si jQuery no está cargado, también se puede usar jqLite de Angular).
Controlador: se utiliza cuando hay instrucciones anidadas. El propósito de este parámetro es proporcionar una referencia a la directiva principal desde la directiva secundaria y permitir la interacción entre directivas. La directiva tab es un ejemplo típico del uso de este parámetro:/powertoolsteam/GBE7N/1/
Tenga en cuenta que al llamar al método de enlace, las variables de alcance pasadas por valor ("@") no se inicializarán. Pero se inicializará en otro punto del ciclo de vida de la instrucción. Si necesita escuchar este evento, puede usar ámbitos. Método $watch.