¿Qué es una directiva AngularJS?

He pasado bastante tiempo leyendo la documentación de AngularJS y varios tutoriales, y me ha sorprendido bastante lo inaccesible de la documentación.

Tengo una pregunta simple y respondible que también puede ser útil para otras personas que buscan recoger AngularJS:

¿Qué es una directiva AngularJS?

Debería haber una definición simple y precisa de una directiva en alguna parte, pero el sitio web de AngularJS ofrece estas definiciones sorprendentemente inútiles:

En la página de inicio :

Las directivas son una característica única y poderosa disponible en AngularJS. Las directivas le permiten inventar una nueva sintaxis HTML, específica para su aplicación.

En la documentación del desarrollador :

Las directivas son una forma de enseñar HTML nuevos trucos. Durante la compilación DOM, las directivas se comparan con el HTML y se ejecutan. Esto permite a las directivas registrar el comportamiento o transformar el DOM.

Y hay una serie de charlas sobre directivas que, irónicamente, parecen suponer que el público ya comprende lo que son.

¿Alguien podría ofrecer, para una referencia clara, una definición precisa de lo que es una directiva que explica:

1. Qué es (vea la definición clara de jQuery como ejemplo)
2. ¿Qué problemas y situaciones prácticas se pretende abordar?
3. Qué patrón de diseño incorpora o, alternativamente, cómo encaja en la supuesta misión MVC / MVW de AngularJS.

¿Qué es (vea la definición clara de jQuery como ejemplo)?

Una directiva es esencialmente una función ^† que se ejecuta cuando el compilador Angular lo encuentra en el DOM. Las funciones pueden hacer casi cualquier cosa, por eso creo que es bastante difícil definir qué es una directiva. Cada directiva tiene un nombre (como ng-repeat, tabs, make-your-own-own) y cada directiva determina dónde se puede usar: elemento, atributo, clase, en un comentario.

^† Una directiva normalmente solo tiene una función de enlace (post). Una directiva complicada podría tener una función de compilación, una función de preenlace y una función de postenlace.

¿Qué problemas y situaciones prácticas se pretende abordar?

Lo más poderoso que pueden hacer las directivas es extender HTML. Sus extensiones son un lenguaje específico de dominio (DSL) para construir su aplicación. Por ejemplo, si su aplicación ejecuta un sitio de compras en línea, puede extender HTML para que tenga directivas de "carrito de compras", "cupón", "especiales", etc. "dominio" de compras en línea, en lugar de "div" y "span" (como ya se mencionó @WTK).

Las directivas también pueden componer HTML: agrupe un montón de HTML en algún componente reutilizable. Si te encuentras usando ng-include para extraer mucho HTML, probablemente sea hora de refactorizar las directivas.

¿Qué patrón de diseño incorpora o, alternativamente, cómo encaja en la supuesta misión MVC / MVW de angularjs?

Las directivas son donde manipula el DOM y captura los eventos DOM. Esta es la razón por la cual las funciones de compilación y enlace de la directiva reciben el "elemento" como argumento. Usted puede

• definir un montón de HTML (es decir, una plantilla) para reemplazar la directiva
• enlazar eventos a este elemento (o sus hijos)
• agregar / eliminar una clase
• cambiar el valor del texto ()
• esté atento a los cambios en los atributos definidos en el mismo elemento (en realidad, son los valores de los atributos los que se observan; estas son propiedades de alcance, por lo tanto, la directiva observa el "modelo" en busca de cambios)
• etc.

Tal vez una definición realmente simple e inicial para directivas angulares sería

Las directivas AngularJS (directivas ng) son atributos HTML con un prefijo ng (ng-model, ng-app, ng-repeat, ng-bind) utilizado por Angular para extender HTML. ( de: tutorial angular de W3schools )

Algunos ejemplos de esto serían

La directiva ng-app define una aplicación AngularJS.

La directiva ng-model vincula el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.

La directiva ng-bind vincula los datos de la aplicación a la vista HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Mira este tutorial, al menos para mí fue una de las mejores introducciones a Angular. Un enfoque más completo sería todo lo que @ mark-rajcok dijo antes.

Mirando la documentación, las directivas son estructuras que puedes escribir que angularjs analiza para crear objetos y comportamientos. En otras palabras, es una plantilla en la que usas una combinación de nodos arbitrarios y pseudo-javascript y marcadores de posición para datos para expresar intenciones de cómo su widget (componente) está estructurado, cómo se comporta y cómo se alimenta con datos. Angularjs luego se ejecuta contra esas directivas para traducirlas en código html / javascript en funcionamiento.

Las directivas están ahí para que pueda construir componentes más complejos (widgets) utilizando la semántica adecuada. Solo eche un vistazo al ejemplo de directivas angularjs: están definiendo el panel de pestañas (que, por supuesto, no es válido en HTML normal). Es más intuitivo de usar como div-s o tramos para crear una estructura que luego se labra para parecerse a un panel de la pestaña.

En las directivas de AngularJS hay marcadores html para un elemento HTML DOM como un atributo (restrict- A), nombre del elemento (restrict- E), comentario (restrict- M) o clase CSS (restrict - C) que le dicen al compilador HTML de AngularJS ($ compilar) para realizar un comportamiento específico a ese elemento DOM o incluso transformar el elemento DOM y sus elementos secundarios. Algunos ejemplos son ng-bind, ng-hide / show, etc.

La página de inicio es muy clara al respecto: cuando pasa el mouse sobre las pestañas en la última sección:

Hemos ampliado el vocabulario de HTML con un tabs elemento personalizado . El tabsabstrae la estructura HTML complejo y comportamientos necesarios para la prestación de pestañas. El resultado es una vista más legible y una sintaxis muy fácilmente reutilizable ".

Luego en la siguiente pestaña:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Por lo tanto, puede inventar elementos html, es decir, tabsy dejar que angular maneje la representación de esos elementos.