Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

As imagens não aparecem, a tag "meu-painel" não é substituida no HTML que aparece no dev tools do chrome

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Minimizando a complexidade do nosso HTML e atividade Colocando em prática

por Allan Pires
| 75k xp | 12 posts

Estou há algum tempo descobrir o problema e não acho. Não há nenhum erro no console do chrome, porêm a tag ainda não é substituida.

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="https://code.angularjs.org/1.5.6/angular.min.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.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>
        </div> <!-- fim container -->        
    </body>
</html>

fotos-controller.js:

angular.module("alurapic").controller("FotosController", function($scope, $http){

    $http.get("/v1/fotos")
        .then(function(dados){
            $scope.fotos = dados.data;
            console.log(dados.data);

        },
        function(erro){
            console.log(erro);
        });
});

minhas-diretivas.js:

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

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


        };

        return ddo;

    });

painel.html:

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

        </div>
    </div>

main.js:

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

Thanks

4 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Você está usando uma versão bugada do angular! Já gastei muito tempo com um aluno que pegou outra versão não homologada por mim e no final era bug da distribuição

Então, o melhor é usar a versão homologada do curso e no final migrar. Se der problema, sabemos que é bug da distribuição.

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Bom, o problema do seu código nem é o Angular 1.5.

Você escreveu errado o nome da propriedade templateUrl. Você colocou o 'u' em minúsculo.

Tem um detalhe também: você também colocou a classe "class="col-md-2" no template da diretiva.

O correto é colocar a classe na diretiva em uso, como mostro no vídeo:

            <div class="row">
                <meu-painel class="col-md-2" 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 -->

Inclusive uso col-md-2 e não col-md-3.

O problema de colocar a classe direto na diretiva é que você esta obrigando todo mundo que usar o painel adotar um mesmo tamanho.

Quando você modificar o projeto, deixa claro o que você fez na hora de postar para ajudar quem for ler o seu código.

Sucesso e bom estudo Allan!

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Oi Allan, tudo certinho agora? O painel é exibido com as fotos?

por Allan Pires
| 75k xp | 12 posts

O problema era esse mesmo do templateurl minúsculo. Mudei pra templateUrl e passou a funcionar normalmente:

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

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


        };

        return ddo;

    });

Obrigado!