O que é uma diretiva AngularJS?


181

Passei bastante tempo lendo a documentação do AngularJS e vários tutoriais e fiquei bastante surpreso com o quão inacessível é a documentação.

Tenho uma pergunta simples e respondível que também pode ser útil para outras pessoas que desejam adquirir o AngularJS:

O que é uma diretiva AngularJS?

Deve haver uma definição simples e precisa de uma diretiva em algum lugar, mas o site do AngularJS oferece essas definições surpreendentemente inúteis:

Na página inicial :

As diretivas são um recurso exclusivo e poderoso disponível no AngularJS. As diretivas permitem que você invente uma nova sintaxe HTML, específica para seu aplicativo.

Na documentação do desenvolvedor :

As diretivas são uma maneira de ensinar novos truques em HTML. Durante a compilação do DOM, as diretivas são comparadas com o HTML e executadas. Isso permite que as diretivas registrem o comportamento ou transformem o DOM.

E há uma série de palestras sobre diretrizes que, ironicamente, parecem assumir que o público já entende o que são.

Alguém seria capaz de oferecer, para referência clara, uma definição precisa do que é uma diretiva que explica:

  1. O que é (veja a definição clara de jQuery como um exemplo)
  2. Quais problemas e situações práticas se destina a abordar
  3. Qual padrão de design ele personifica ou, alternativamente, como ele se encaixa na suposta missão MVC / MVW do AngularJS.

2
Você me viu
Joshuamabina

Não tenho certeza de como foi em 2012 no Stack Overflow, mas acabei de revisar esta questão e adicionar a tag "diretiva angular". Suas informações de tag fornecem uma definição bastante clara. Além disso, notei que não consigo encontrar a segunda citação nos documentos do desenvolvedor ...
user4642212 22/17/17 /

Respostas:


142

O que é (veja a definição clara de jQuery como um exemplo)?

Uma diretiva é essencialmente uma função que é executada quando o compilador Angular a encontra no DOM. A (s) função (s) pode (m) fazer quase tudo, e é por isso que acho que é bastante difícil definir o que é uma diretiva. Cada diretiva possui um nome (como ng-repeat, tabs, make-up-yourself) e cada diretiva determina onde pode ser usada: elemento, atributo, classe, em um comentário.

Normalmente, uma diretiva possui apenas uma função de link (pós). Uma diretiva complicada pode ter uma função de compilação, uma função de pré-link e uma função de pós-link.

Quais problemas e situações práticas ele pretende resolver?

A coisa mais poderosa que as diretivas podem fazer é estender o HTML. Suas extensões são uma linguagem específica de domínio (DSL) para criar seu aplicativo. Por exemplo, se seu aplicativo executar um site de compras on-line, você poderá estender o HTML para ter diretivas "carrinho de compras", "cupom", "promoções" etc. etc. - quaisquer palavras, objetos ou conceitos que sejam mais naturais para usar nas " compras on-line ", em vez de" div "se" span "s (como o @WTK já mencionou).

As diretivas também podem componente HTML - agrupe um monte de HTML em algum componente reutilizável. Se você estiver usando o ng-include para extrair muito HTML, provavelmente é hora de refatorar as diretivas.

Qual padrão de design ele incorpora ou, alternativamente, como ele se encaixa na suposta missão MVC / MVW do angularjs

As diretivas são onde você manipula o DOM e captura os eventos do DOM. É por isso que as funções de compilação e link da diretiva recebem o "elemento" como argumento. Você pode

  • defina um monte de HTML (isto é, um modelo) para substituir a diretiva
  • eventos de ligação a este elemento (ou seus filhos)
  • adicionar / remover uma classe
  • altere o valor text ()
  • observe as alterações nos atributos definidos no mesmo elemento (na verdade, são os valores dos atributos que são observados - essas são propriedades do escopo; portanto, a diretiva observa o "modelo" para alterações)
  • etc.


Em HTML temos coisas como <a href="...">, <img src="...">, <br>, <table><tr><th>. Como você descreveria o que são a, href, img, src, br, table, tr e th? Isso é o que é uma diretiva.


2
Mark, obrigado. Eu acho que isso é claro e provavelmente o mais próximo de uma resposta precisa. Eu acho que as diretivas sempre estão vinculadas às tags html, certo? Portanto, talvez seja mais preciso dizer que uma diretiva é uma função vinculada a uma tag HTML. Como tal, permite que a linguagem HTML seja estendida declarativamente.
precisa

Bem, uma diretiva pode ser usada em um comentário, portanto, nem todas as diretivas precisam estar vinculadas a uma tag HTML. Por exemplo,<!-- directive: my-directive exp -->
Mark Rajcok

Mark, isso seria o uso não convencional de uma diretiva? ou seja, as diretivas são convencionalmente usadas e propostas para estender o HTML.
tohster

9
OK, eu tenho uma melhor compreensão agora. Uma maneira de pensar sobre isso é: 1. As DSLs geralmente representam árvores de sintaxe 2. O DOM HTML é uma árvore de sintaxe DSL, mas é rígida: as tags são na maioria das vezes rigidamente projetadas e propostas, e não extensíveis. 3. O AngularJS e o mecanismo de diretiva especificamente tornam o DOM HTML mais flexível, permitindo que os desenvolvedores construam nós de árvore personalizados. Esses nós pode representar novos comportamentos, ou agregações de comportamentos (sub-árvores) existentes 4. Assim, as directivas permitem HTML DOM de evoluir para uma DSL personalizado
tohster

1
@ MarkRajcok Estou lutando com seu último parágrafo. É simples <div></div>uma diretiva? Tu disseste sim. Mas não há decoração aqui (via elemento, classe, comentário, atributo). As pessoas aqui estão dizendo que esses são marcadores para um DOM HTML . Você pode esclarecer ? (Eu não estou falando sobre a causa onde você pode criar uma directiva para um elemento simples como <div>)
Royi Namir

11

Talvez uma definição realmente simples e inicial de diretivas angulares seja

As diretivas AngularJS (diretivas-ng) são atributos HTML com um prefixo ng (modelo-ng, aplicativo-ng, repetição-ng, ligação-ng) usado pelo Angular para estender o HTML. ( de: tutorial angular do W3schools )

Alguns exemplos disso seriam

A diretiva ng-app define um aplicativo AngularJS.

A diretiva ng-model vincula o valor dos controles HTML (entrada, seleção, área de texto) aos dados do aplicativo.

A diretiva ng-bind liga os dados do aplicativo à visualização HTML.

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

Confira este tutorial, pelo menos para mim, foi uma das melhores introduções ao Angular. Uma abordagem mais completa seria tudo o que o @ mark-rajcok disse antes.


4

Analisando a documentação, as diretivas são estruturas que você pode escrever que angularjs analisa para criar objetos e comportamentos.Em outras palavras, é um modelo no qual você usa a combinação de nós arbitrários e pseudo-javascript e espaços reservados para dados para expressar intenções de como seu widget (componente) está estruturado, como se comporta e como é alimentado com dados. O Angularjs então executa essas diretivas para convertê- las em código html / javascript.

As diretivas existem para que você possa criar componentes mais complexos (widgets) usando a semântica adequada. Basta dar uma olhada no exemplo de diretivas angularjs - elas estão definindo o painel de guias (o que não é válido em HTML comum). É mais intuitivo do que usar div-s ou spans para criar uma estrutura que é estilizada para parecer um painel de guias.


Adicionei o que considero uma explicação um pouco menos técnica.
raam86

1
Graças isso é bastante útil. Então, talvez eu possa pensar nele como um tipo de modelo dinâmico (semelhante a uma classe na programação OO) que encapsula um componente, o descreve por propriedades e comportamentos, é capaz de ser instanciado e pode se expressar para o DOM? E a razão pela qual existe (versus objeto javascript ou modelo html) é permitir que as tags HTML assumam comportamentos mais dinâmicos, do tipo objeto, para que possam começar a se tornar manipuláveis ​​na programação do tipo OO?
tohster

Sim e não. Eu não diria que a razão pela qual as diretivas existem tem muito a ver com elas serem manipuláveis ​​na programação OO. De fato, toda a abordagem angularjs da estrutura parece fortemente relacionada aos atributos HTML e arbitrário dos nós DOM, em vez de escrever o código OO Javascript. Eu entendo essa vibe olhando todos os exemplos de como o angularjs está resolvendo os problemas do dia a dia. Eu diria que a principal razão por trás das diretivas é ter como incorporar comportamentos e dados em um componente semanticamente estruturado.
WTK

3

Nas diretivas AngularJS, são marcadores html re para um elemento HTML DOM, como um atributo (restrito-A), nome do elemento (restrito-E), comentário (restrito-M) ou classe CSS (restrito-C) que informa ao compilador HTML do AngularJS ($ compilar) para executar um comportamento especificado para esse elemento DOM ou até mesmo transformar o elemento DOM e seus filhos. Alguns exemplos são ng-bind, ng-hide / show etc.


2

A página inicial é muito clara sobre isso: quando você passa o mouse sobre as guias na última seção:

Estendemos o vocabulário do HTML com um tabs elemento personalizado . O tabsresumo da estrutura HTML complexa e do comportamento necessário para a renderização das guias. O resultado é uma visualização mais legível e uma sintaxe facilmente reutilizável ".

Em seguida, na próxima guia:

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;
        }

Assim, você pode inventar elementos html, ou seja, tabse deixar angular manipular a renderização desses elementos.


2
Obrigado pela resposta rápida! Portanto, o objetivo de uma diretiva é estender o vocabulário do HTML através da criação de tags e atributos personalizados? Isso parece bastante poderoso, embora pareça abordar um escopo de problema muito mais amplo que o "MVW". Entre outras pessoas, você pode discordar, mas eu acho que rolar para o final de uma página e passar o mouse sobre uma palavra com hiperlink e ler uma dica de ferramenta pop-up que não menciona uma vez a palavra 'diretiva' não é exatamente uma " definição muito clara "do que é uma diretiva. No entanto, realmente aprecio a resposta rápida.
tohster

Sim! Você pode verificar esse violino que eles fizeram. O html real é diferente do no painel html.
raam86
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.