Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida sobre o uso do & em diretivas

Olá,

Fiquei em dúvida sobre a possibilidade de tornar o código mais genérico quando uso uma passagem por referência no escopo de diretivas (&). Vou utilizar um exemplo para tentar explicar melhor o ponto que fiquei confuso.

No exemplo da aula, criamos uma diretiva "meu-botao-perigo". Eu entendi que a criação dessa diretiva seria para tornar esse tipo de botão genérico. Por exemplo, eu poderia utilizar o "meu-botao-perigo" para remover uma foto ou para remover um grupo (considerando que a aplicação de exemplo tivesse um CRUD para grupos). Exemplos:

<!-- Botão para remover foto -->
<meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>
<!-- Botão para remover grupo -->
<meu-botao-perigo acao="remover(grupo)" nome="Remover"></meu-botao-perigo>

O exemplo acima supõem que existe uma função remover(grupo) dentro do escopo do controller de grupos.

Considerando esses casos, a definição da diretiva propriamente dita, ficou confusa para mim, pois ela está usando o parâmetro fixo "foto", ou seja, isso me parece que tirou a possibilidade de tornar essa diretiva genérica. Abaixo está a linha do exemplo da aula:

ddo.scope = {
            nome: '@',
            acao: '&'
        };

ddo.template = '<button ng-click="acao(foto)" class="btn btn-danger btn-block">{{nome}}</button>';
`

O ng-click="acao(foto)" está sempre mandando foto. E se eu quisesse utilizar para um grupo? Teria alguma forma de tornar esse parâmetro também genérico?

Espero que tenha conseguido expressar minha dúvida com clareza.

Muito obrigado!

4 respostas
solução!

Bom dia, Vinicius.

Achei tua dúvida interessante e resolvi testar, mudei o nome do parâmetro na diretiva de

ng-click="acao(foto)"

para

ng-click="acao(parametro)"

e o código continuou funcionando. Então creio que podemos concluir que o botão é genérico, pois o parâmetro passado para o ng-click serve apenas para indicar que a função a ser validada possui um parâmetro como argumento. Ou seja, é apenas uma espécie de placeholder.

Oi Kaio,

Muito obrigado pela ajuda tão rápida! :)

Depois de escrever minha dúvida, fiz mais alguns testes e revisei o material da aula e identifiquei que também é possível resolver com:

ng-click="acao()"

Ou seja, agora ficou claro que o que é levado em conta é a referência ao método propriamente dito, sem se importar com os parâmetros (nome e quantidade).

Muito legal! Obrigado mais uma vez pela ajuda!

Repliquei aqui e realmente funciona. Interessante essa interação mas parece que pode levar a confusão com facilidade.. haha Abraço!

É verdade! Eu gosto bastante de JavaScript e seus frameworks mas, de fato, tem bastante coisa que pode nos deixar um pouco confusos. Esse é um exemplo. Agora caiu a ficha, mas pegando um código legado esse tipo de coisa pode ser uma boa dor de cabeça! kkkkkkkkk :)

Valeu! Abraços