Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Tem alguma coisa dando errado na hora de criar meu componente

Tem alguma coisa dando errado na hora de criar meu painel de fotos. Eu já bati a cabeça e não consigo achar o problema. Não achei nenhum erro no meu código e no console do navegador não aparece nenhum erro. Meu código está assim:

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/my-directives.js"></script>
</head>

<body ng-controller="FotosController">
    <div class="container">
        <div class="jumbotron">
            <h1 class="text-center">Alurapic</h1>
        </div>
        <div class="row">
            <painel-foto ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
                <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
            </painel-foto>
        </div>

    </div> <!-- fim container -->
</body>

</html>

my-directives.js:

angular.module("MyDirectives", [])
    .directive("painelFoto", function () {
        var ddo = {};
        ddo.restrict = "AE";
        ddo.transclude = true;
        ddo.scope = {
            titulo: '@'
        };
        ddo.templateUrl = "js/directives/painel-foto.html";
        return ddo;
    });

fotos-controller.js

angular.module("Alurapic").controller("FotosController", function ($scope, $http) {
    $scope.fotos = [];
    $http.get("v1/fotos")
        .success(function (dados) {
            $scope.fotos = dados;
        })
        .error(function (erro) {
            console.log("Ocorreu um erro: " + erro);
        })
});

painel-foto.html:

<div class="panel panel-default" ng-repeat="foto in fotos">
    <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",["MyDirectives"]);

Tentei criar outra diretiva (componente) pra testar e funcionou. Mas o painel de fotos não aparece.

6 respostas

Fala aí Sergio, tudo bem? Antes de tentar lhe ajudar, gostaria de entender o motivo para a realização do curso de AngularJS.

Pergunto isso porque o mesmo está em LTS e logo será descontinuado, temos a versão nova que encontra-se na 7 e na Alura temos um ótimo curso referente a versão 6.

Espero ter ajudado.

Como assim está em LTS? O que significa essa sigla?

Estou fazendo esse curso, pois o mercado de tralho pede conhecimento em AngularJS (versão 1.X), pois existem muito mais aplicações desenvolvidas nessa versão antiga do Angular do que nas versões mais novas. Eu inclusive estou também fazendo o curso de Angular da versão mais nova.

Mas preciso aprender AngularJS também.

LTS significa que a versão recebe um “suporte a longo prazo” (Long Term Suport) porém não receberá melhorias só correção de bugs sérios.

https://docs.angularjs.org/misc/version-support-status

Se um dia inventarem uma nova tecnologia muito maneira (tipo streaming de câmeras 3D com simulação de cheiros) o AngularJS não irá suportar.

Valeu André, mas ainda estou tendo problemas na minha aplicação AngularJS. Já bati a cabeça e não acho o problema.

Não sei AngularJS, vamos esperar o Matheus voltar pra ver se ele consegue. Ele entra geralmente de segunda a sexta a noite.

solução

Então Sergio, sugiro você parar o curso de AngularJS e focar no curso de Angular 6:

https://cursos.alura.com.br/course/angular-fundamentos

O mercado pede Angular (>= 2.x), dificilmente vai encontrar vagas para AngularJS, todo aprendizado será perdido pois nenhum é reaproveitado nas versões novas do framework.

Sobre sua dúvida, acho que o problema está no painel.html, não precisa fazer o segundo ng-repeat:

<div class="panel panel-default" ng-repeat="foto in fotos">

Deixe apenas:

<div class="panel panel-default">

Espero ter ajudado.