Directivas

Según la definición que da Angular: las directivas son marcadores sobre los elementos del DOM (como los atributos, los nombres de elementos o etiquetas, o las clases CSS) que indican al compilador HTML de Angular ($compile) que adjunte un determinado comportamiento a dicho elemento del DOM o incluso que lo transforme por un bloque completo de contenido.

Por clarificarlo aún más, las directivas permiten transformar el aspecto y comportamiento del código HTML por otro que definamos nosotros. En Ionic, todas las etiquetas que empiezan con ion- son directivas de Angular que tienen un comportamiento y un aspecto asociado. Por ejemplo, la etiqueta:

<ion-list>

Esta etiqueta se procesa mediante una directiva de Angular y genera el código y comportamiento correspondiente a un listado. Y para que esto funcione, en el código de Ionic hay una directiva que está configurada para gestionar cualquier elemento con el nombre ion-list. El código sería el siguiente:

IonicModule.directive('ionList', [ '$timeout',
    function($timeout) {
      return {
        restrict: 'E',
        require: ['ionList', '^?$ionicScroll'],
        controller: '$ionicList',
        compile: function($element, $attr) {
            //... etc ...
        }
      }
 }
]);

En este código hay muchos conceptos nuevos, pero de momento solo nos interesa centrarnos en algunos aspectos clave. La línea restrict: 'E' indica si la directiva se refiere a un atributo, a un elemento o una clase CSS. La propiedad rectrict puede tener los siguientes valores:

• 'A' – La directiva se refiere solo a nombres de atributos.

• 'E' – La directiva se refiere solo a elementos (los nombres de las etiquetas).

• 'C' – Se refiere al nombre de una clase CSS.

• 'AEC' – Estas letras se pueden usar de forma combinada para por ejemplo referirnos a la vez a atributos, elementos y clases.

En el ejemplo el nombre de la directiva indica ionList, pero Angular lo transformará y procesará tanto el nombre ionList como ion-list. Otro ejemplo, si creamos una directiva para ionTab se tendrá en cuenta tanto ionTab como los elementos con nombre ion-tab.