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

As imagens aparecem, mas a diretiva não é processada (os painéis não aparecem)

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?

23 respostas

Claro que posso ajudar Arthur. A primeira coisa que eu quero que você veja é se você salvou o template da sua diretiva no local que deveria estar e que é indicado na propriedade templateUrl. É um erro comum gravar o arquivo com nome diferente ou em outra pasta.

Ah, e também verificar a tag script que importa o script da diretiva.

Aguardo seu retorno.

Obrigado Flávio.

Abri a pasta do projeto e verifiquei os arquivos. Estão todos em seus devidos lugares.

No console do Chrome não vejo erros, e coloquei um break-point no "minhas-diretivas.js" e ele foi acionado ao recarregar a página. Além disso, todos os .js do projeto aparecem na aba "Network".

O template da diretiva, esta no local correto? Dá mais uma verifica nesse arquivo antes deu olhar seu código com visão de raio X. É que não estou na frente do computador agora e estou vendo pelo smartphone.

Quando isso acontece e não dá erro, é porque a diretiva não foi registrada e o angular acha que meu-painel é uma TAG HTML e deixa o navegador interpretar. Como o navegador não conhece essa TAG ele simplesmente a ignora.

Aguardo mais essa sua verificação.

Ei! Tem um erro o seu código:

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

Veja que há uma vírgula sobrando ai!

Olá Flávio.

Tranquilo. Sobre esse erro indicado, fiz a correção removendo a vírgula, mas não corrigiu o problema.

Sobre a localização do arquivo "meu-painel.html", está no local correto sim. Para verificar, o abri no endereço http://localhost:3000/js/directives/meu-painel.html e consegui verificar o código fonte.

Tem alguma coisa errada ai, porque se estava com o problema da vírgula, tinha que exibir uma mensagem de erro no seu console e você disse que não estava exibindo. Tinha que exibir... isso me faz pensar que você esta mexendo ou debugando outro projeto.

Desligue todos os breaks points do Chrome e teste mais uma vez.

Eu não vi nada errado no seu código. Peguei o código e colei encima do meu projeto. Tudo funcionou perfeitamente.

Você tem alguma coisa ai instalada no seu browser? Não deveria jamais ser necessário isso, mas limpe o cache do seu navegador.

Você esta usando o servidor disponibilizado pelo projeto, certo?

.

Outra coisa, não é FotoController, você mudou o nome do controller é FotosController. Se você não alterar terá problema quando FotoController entrar!

Aguardo seu retorno.

Ok. Primeiro eu desabilitei todos os breakpoints do Chrome. Como não deu resultado, marquei para capturar todas as exceptions sem tratamento.

Acabou que surgiu um erro no angular: https://docs.angularjs.org/error/$injector/nomod?p0=ngLocale

Isso me leva a crer que o módulo "minhasDiretivas" não está sendo carregado. Sobre o projeto, eu cheguei a reiniciar o servidor node.js e até limpar o cache de arquivos no navegador. Tudo indica que é o projeto correto, porque estou atualizando e essas alterações se refletem no navegador.

Alguma outra ideia?

Você modificou algum arquivo do projeto? Esta usando o zip do projeto baixado? Alterou lib? Inventou algo diferente?

Experimentou baixar o projeto do próximo capítulo e verificar se funciona no Chrome? Se não funcionar, teu browser esta zuado. Testei aqui em quase todos os navegadores do mercado (uso SauceLabs, pago para rodar testes) e funcionou sem um problema.

Tem que haver alguma coisa diferente no seu projeto ou no browser.

Aguardo sua resposta se você alterou ou não alguma lib do projeto sem me notificar.

Ah, desculpa, só vi depois as outras postagens. Sim estou usando o servidor fornecido pelo curso. Sobre o nome do Controller, fiz a alteração, mas isso não era um problema, pois o nome estava "FotoController" no controller e no index.html.

Sobre coisas instaladas no navegador, tenho várias. Fiz um novo teste com todas desabilitadas, e mesmo assim não funcionou.

Sobre alteração, não, não mexi em nenhum arquivo da lib ou qualquer outro. Vou baixar o projeto novamente e repetir os testes.

Então, faça isso. Se o problema persistir, agora quem quer descobrir mais do que todo mundo o que esta aconteceu sou eu.

Você zipa seu projeto problemática e me passa o link para baixá-lo.

Testa em outro browser, to achando que algum plugin ai esta zuando com sua aplicação. É a hipótese mais forte até agora.

Aliás, não é uma boa prática testar projetos em navegadores maceteados. A boa prática é você testar em um navegador clean.

Já gastei dias e dias com alunos aqui quando no final o problema era dos plugins dois ou configurações do Chrome ou Firefox que davam problema com as aplicações. Até addlblock já vi dar problema.

Mas até que eu saiba o que esta acontecendo, vamos investigando. O mais fantástico é que essa parte não tem mistério.. mais de 1000 alunos passaram sem problema algum e isso me deixa mais curioso ainda em descobrir o que seja.

Não desista!

Algum retorno? To aqui ansioso para descobrir :)

Perfeito Flávio, também ficou extremamente curioso pra entender o problema.

Bom, segui sua sugestão e baixei o projeto da aula 3 e refiz minhas alterações. E tudo funcionou perfeitamente.

Também reinstalei o Firefox e o projeto anterior não funcionou, mas o novo sim, como era de esperar.

Vou comparar arquivo por arquivo dos projetos para tentar entender o motivo, mas o problema em si já está resolvido.

Muito obrigado por todo suporte.

Coloquei os 2 projetos, o que funciona e o que não funciona no link abaixo. Projetos

Qual editor vc usa? Pode ter um charcode impróprio ai sem querer que está invalidando tudo.

solução!

De alguma maneira a pasta do projeto foi corrompida. Fui criando novos arquivos e colocando e cortando o conteúdo e funcionou.

Lembro que isso aconteceu com algum aluno. Você usa Windows? Usou algum programa de descompactar diferente?

Nunca saberemos o que corrompeu seus arquivos.

Ah, só pra não te deixar sem resposta.

Sim, uso windows 10. O Editor é o Visual Studio Code. E to usando o próprio windows pra zippar.

Beleza. É que pensei que pudesse ser um editor tabajara que tivesse corrompido sem querer o projeto. Bizarro, mas você não fez nada de errado.

Como disse, já aconteceu com um aluno aqui, mas foi no curso de Python, algo bem semelhante.

Sucesso e bom estudo!

o problema pode ser o ddo.restrict, o certo é ddo.restric = 'AE';

Bom, eu li todas as discussões pois estava com o mesmo problema, fiz tudo conforme falaram e até que baixei de novo o projeto e funcionou, porém ao baixar e ver o html, percebi que ele estava sem a diretiva e quando coloquei ela, parou de funcionar novamente. Ai certo tempo depois, do fundo do meu subconsciente veio a voz do Flávio falando: você tem que importar a diretiva no main.js.

Então eu fui la no main.js e coloquei a diretiva:

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

ta dã.... Esse era meu problema. Desculpa ressuscitar o tópico, mas achei bacana compartilhar

Sei que está no primeiro tópico, porém para mim, passou despercebido