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

Como capturar o index do item a ser removido quando ouvindo de uma diretiva ao invés do controlador

Olá, equipe Alura! Como vão?

Optei por realizar toda a parte de formatação de meu painel dentro da diretiva meu-painel.html, como pode ser visto abaixo:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
    <div class="panel-body">
        <img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">
        <a href="" class="btn btn-primary btn-block">Editar</a>
        <button ng-click="remover(id,titulo)" class="btn btn-danger btn-block">Remover</button>
    </div>
</div>

E, para que isso funcionasse, utilizei o seguinte código no módulo minhas-diretivas.js:

.directive('meuPainel', function ($http) {
         var ddo = {}; 

         ddo.restrict = "AE";

         ddo.scope = { 
             titulo: '@',
             url: '@',
             id: '@'
         };

         ddo.transclude = true;

         ddo.templateUrl = 'js/directives/meu-painel.html';

         ddo.link = function ($scope, element, attrs) {
             $scope.remover = function (id, titulo) {
                 $http.delete('/v1/fotos/' + id)
                     .success(function () {
                         console.log('Foto ' + titulo + ' foi removida com sucesso');
                     })
                     .error(function (erro) {
                         console.log(erro);
                         console.log('Não foi possível remover a foto ' + titulo);
                     });
             }
         };

         return ddo;
})

E também alterei a parcial principal.html para que o Angular receba o id do item a ser excluido, como visto abaixo.

<div class="row row-eq-height">
    <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}" url="{{foto.url}}" id="{{foto._id}}">
    </meu-painel>
</div>

Tudo funciona bem até este ponto, porém gostaria de saber duas coisas:

1- Há uma maneira de saber o index do painel que será apagado e excluí-lo sem recarregar a view, como é feito no exercício do professor?

2-Como posso ativar uma mensagem na view do usuário quando o painel for excluído?

Estou realizando esta abordagem pois acho estranho uma divisão de marcações de uma mesma seção em dois HTML.

Podem me ajudar? Ou vocês indicam fazer do modo do exercício, com as marcações tanto na principal.html quanto na meu-painel.html?

3 respostas
solução!

Bom dia. Antes de mais nada, vale a pena frisar que você matou totalmente o reuso do seu painel quando deixou fixo dentro dele o conteúdo que ele deve apresentar.

Sobre precisar do índice, na diretiva ng-repeat você pode ter acesso ao índice através da variável $index.

Veja um exemplo:

https://pt.stackoverflow.com/questions/109691/pegar-o-index-de-um-ng-repeat-que-contenha-um-ng-controller-no-scope-em-angula

Para ativar a mensagem você pode usar seu conhecimento de JavaScript, não é muito diferente do que você faria com JavaScript puro, aliás, pré-requisito para se aprender Angular. Todavia, para poupar o seu tempo, você pode usar o módulo ngToast. É uma casquinha sobre o famoso toast para exibir mensagens.

http://tamerayd.in/ngToast/

Dá uma conferida nesse módulo. O ideal é evitarmos de reinventarmos a roda e adotarmos soluções consagradas do mercado.

Professor, bom dia!

Muito obrigado pela ajuda, você tem razão, eu não estava pensando pelo lado da reusabilidade do painel, sem falar que este caminho que eu escolhi acaba tirando a elegância da maneira como o Angular gerencia seus arquivos.

Caso resolvido, retornarei para o padrão das aulas, mas agora com o conhecimento de como contornar estes problemas caso queira trabalhar dentro da diretiva.

Tranquilo meu aluno. Mas eu entendi que você queria isolar em um único lugar um código para que não ficasse espalhado, e nesse sentido, entendi sua intenção. Mas como vimos, pensar no reuso é importante.

Sucesso e bom estudo meu aluno!