Olá, sei que o tópico https://cursos.alura.com.br/forum/topico-as-imagens-aparecem-porem-nao-aparecem-os-paineis-22668 é sobre a mesma dúvida, mas o próprio sistema indica a abertura de um novo tópico.
O problema é que as imagens aparecem corretamente, mas os painéis não estão. Ao que tudo indica, a diretiva não está sendo processada.
index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Alurapic</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/lib/angular.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/foto-controller.js"></script>
<script src="js/directives/minhas-diretivas.js"></script>
</head>
<body ng-controller="FotoController">
<div class="container">
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="row">
<meu-painel ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
<img class="center-block img-responsive" src="{{foto.url}}" alt="{{foto.titulo}}">
</meu-painel>
</div>
</div>
<!-- fim container -->
</body>
</html>
minhas-diretivas.js
angular.module('minhasDiretivas', [])
.directive('meuPainel', function () {
var ddo = {};
ddo.restrict = 'AE';
ddo.scope = {
titulo: '@',
};
ddo.transclude = true;
ddo.templateUrl = "js/directives/meu-painel.html";
return ddo;
});
meu-painel.html
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h3>{{titulo}}</h3>
</div>
</div>
<div class="panel-body" ng-transclude>
</div>
</div>
main.js
angular.module('alurapic', ['minhasDiretivas']);
Poderiam me ajudar?