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

Dúvida no Ex. 6 da Aula 11 - Componentizar ainda é o melhor investimento: precisamos saber mais sobre diretivas!

A diretiva para realizar focus em um elemento ficou muito acoplada, pois ela precisa conhecer um evento que não tem muito a ver com ela (ex: FotoSalva), porém se utilizar um evento mais generico (ex: Focado) seria um problema, pois o broadcast poderia executar em varios lugares. Não há uma maneira de definir o evento escutado de forma dinâmica (ex: scope.$on('variavelDoScopeDaDiretiva', function(){...})?

4 respostas
solução!

Se eu entendi bem sua pergunta, que tal:

.directive('meuFocus', function() {
    var directive = {};

    directive.restrict = 'A';

    directive.scope = {
      evento: '@'
    };

    directive.link = function(scope, element) {
      scope.$on(scope.evento, function() {
        element[0].focus();
      });
    };

    return directive;
});

No html, você adiciona a diretiva no elemento que ganhará o foco, mas dizendo qual evento:

<button meu-focus evento="focarGravar">GRAVAR </button>

<button meu-focus evento="focarVoltar">Voltar</button>

Sua diretiva não está mais amarrada a um evento específico. Agora, só dispara o evento desejado no controller:

$scope.$broadcast('focarGravar');
...

$scope.$broadcast('focarVoltar');

Era isso?

Oi Leonardo, quando puder, me passar seu feedback para eu saber se está tudo certinho, se realmente fui ao ponto da sua dúvida.

Flávio, era isso mesmo!

Eu tinha tentado, porém por um detalhe não funcionou, esqueci de utilizar o scope antes do nome da variável.

Agora funcionou perfeito, obrigado pela ajuda!

Sua pergunta foi muito boa. Eu estou aqui cogitando em colocar um exercício desafio que ajude o aluno a refatorar a diretiva para ficar genérica assim!

Bom estudo e sucesso nessa caminhada!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software