Agenda
- ¿Qué es una directiva en Angular?
- Directivas nativas
- Directivas propias o de terceros
- Tipos
- Scope
- Link
¿Qué es una directiva?
Es un componente utilizado en el HTML y se la puede asignar a cualquier etiqueta por medio de atributos.
Cuando se ejecuta una app Angular, existe un "HTML Compiler" que se encarga de recorrer el documento, localizar las directivas que se hayan utilizado y las ejecuta.
Directivas nativas
- ngApp: Indica cual es el elemento raíz de la aplicación
- ngModel: Informa al "HTML Compiler" que estás usando una variable del modelo.
- ngController: Relación entre un controlador y una vista
- ngShow / ngHide: Oculta o muestra un elemento del HTML en base a una expresión
- muchas más...
Ejemplo
/*SCRIPT.JS*/
angular.module('inputExample', [])
.controller('PersonController', ['$scope', function($scope) {
$scope.personas = 5;
}]);<!--INDEX.HTML-->
<body ng-app="inputExample">
<form name="formulario" ng-controller="PersonController">
<input type="text" name="personas" ng-model="personas" /><br/>
<span ng-show="personas">Número de personas: {{personas}}</span>
</form>
</body>Número de personas: 55
Output:
Directivas propias/terceros
/*SCRIPT.JS*/
angular.module('inputExample', [])
.controller('personController', ['$scope', function($scope) {
$scope.person = {
firstName: 'Mariano',
lastName: 'Ravinale'
};
}])
.directive('myPerson', function() {
return {
templateUrl: 'my-person.html'
};
});<!--INDEX.HTML-->
<div ng-controller="personController">
<div my-person></div>
</div><!--MY-PERSON.HTML-->
FirstName: {{person.firstName}} <br /> LastName: {{person.lastName}}Tipos
Hay 4 tipos de directivas que podemos crear
- E (Elemento)
- A (Atributo)
- M (Comentario)
- C (Clase)
También se pueden combinar entre ellos como por ejemplo "AE" y de esta forma la directiva la podemos usar tanto como un tag HTML o como un atributo dentro de una etiqueta.
Para esto, dentro de la directiva podemos agregar el parámetro "restrict"
<my-person></my-person>
<span my-person></span>
<!-- directive: my-person -->
<span class="my-person"></span>Tipos
/*SCRIPT.JS*/
angular.module('inputExample', [])
.controller('personController', ['$scope', function($scope) {
$scope.person = {
firstName: 'Mariano',
lastName: 'Ravinale'
};
}])
.directive('myPerson', function() {
return {
restrict: 'E',
templateUrl: 'my-person.html'
};
});<!--INDEX.HTML-->
<div ng-controller="personController">
<my-person></my-person>
</div><!--MY-PERSON.HTML-->
FirstName: {{person.firstName}} <br /> LastName: {{person.lastName}}Scope
El scope de la directiva es el scope del controller de esta directiva.
Si queremos separar los scope, podemos usar la opción "scope" dentro de la directiva y recibir los datos por parámetro.
Esta es una buena práctica para que la directiva se pueda reutilizar.
/*SCRIPT.JS*/
angular.module('inputExample', [])
.controller('personController', ['$scope', function($scope) {
$scope.person = {
firstName: 'Mariano',
lastName: 'Ravinale'
};
}]);
angular.module('inputExample', [])
.directive('myPerson', function() {
return {
restrict: 'E',
scope: {
p: '=personData' /* si el parámetro se llama info, acá usaríamos '=info' */
},
templateUrl: 'my-person.html'
};
});<!--INDEX.HTML-->
<div ng-controller="personController">
<my-person person-data="person"></my-person>
</div>Scope
Link
Si queremos hacer cambios dinámicamente en el DOM desde una directiva tenemos que hacerlo a través de la opción "link" y es una función de este tipo:
function link(scope, element, attrs) { ... }/*SCRIPT.JS*/
angular.module('example', [])
.directive('myColor', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs){
var htmlColor;
switch (attrs.color) {
case "rojo":
htmlColor="#FF0000";
break;
case "verde":
htmlColor="#00FF00";
break;
default:
htmlColor="#000000";
break;
}
element.css("color",htmlColor);
}
};
});Ejemplo
<!--INDEX.HTML-->
<div ng-controller="personController">
<div my-color color="verde">Color</div>
</div>Ejemplo Mean-Seed
Making Sense
By joseguti
