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

As imagens aparecem, porém não aparecem os paineis.

minhas-diretivas.js

angular.module("minhasDiretivas", [])
    .directive("meuPainel", function(){

        var ddo = {
            restrict: "AE",
            scope: {
                titulo: "@"
            },
            transclude: true,
            templateUrl: "/js/directives/meu-painel.html"


        };

        return ddo;

    });

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/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>
    <body ng-controller="FotosController">
        <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="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>
            </div><!-- fim row -->
        </div><!-- fim container -->
    </body>
</html>

main.js

angular.module('alurapic', ['minhasDiretivas']);

meu-painel.html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude>
    </div>
</div>
12 respostas

Relaxa, mais de 2000 pessoas passaram dessa parte sem problema.

O console do Chrome existe alguma mensagem?

Oi Ricardo? Tem mensagem no Chrome? Não esqueci de você não :)

Olá Flávio, desculpa pela demora. O erro que encontrei foi

VM42 extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'verdict' of undefined
    at chrome-extension://cfnpidifppmenkapgihekkeednfoenal/aph.js:240:17handler @ VM42 extensions::uncaught_exception_handler:8
Failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map

e também:

Failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map

O erro

Failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map

Não é erro e explico isso no exercício obrigatório https://cursos.alura.com.br/course/angularjs-mvc/section/2/task/4

A mensagem de erro que você esta tendo é de alguma extensão sua do Chrome que pode estar zuando com sua aplicação.

Teste a aplicação no Firefox. Se funcionar, tem que rever o que vc tem instalado no seu Chrome. Aliás, nunca vi um erro desses, mas deduzi pela mensagem de erro.

Se o erro acontecer no Firefox, vixe.. ai é alguma coisa no seu código que preciso descobrir. Relaxa que mais de 2000 alunos já passaram dessa partesem problema.

Aguardo seu retorno.

Opa ?

Mesmo problema no Firefox.

Mas qual mensagem aparece? Não pode ser a mesma.

solução!

Você salvou o template na mesma pasta e com o mesmo nome que você usou em sua diretiva? Qual mensagem aparece no console do firefox?

Opa? E ai? Verificou para mim?

Olá Flávio, não tem mensagem de erro no console: https://1drv.ms/i/s!AgZgRGySztce0iY-slMPPQ8XqjWH

Opa, eu não faço assim:

   templateUrl: "/js/directives/meu-painel.html"

Eu faço

   templateUrl: "js/directives/meu-painel.html"

Dá uma conferida!