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?