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

Imagem não é filtrada na hora do cadastro!?

bem, na hora de cadastrar informações, o título , a url e a descrição é filtrados, mas a imagem não aparece ao lado do formulário igual feita pelo professor. Abrindo o console eu percebo que ela foi sim, enviada (o console mostra object tudo ok). Fora isso não acho erros no JS, simplesmente não aparece a imagem ao lado quando é colocada a url.

16 respostas

A imagem usa uma diretiva que foi pedida em exercício e não no vídeo. Você chegou a criar a diretiva minha-foto?

Eu perguntei isso, porque quando uma diretiva é usada e ela não é criada, o Angular/Browser a ignora.

Me passa um retorno depois.

Estou verificando, professor...

Poderia me ajudar? não acho onde foi pedido essa diretiva

Claro que ajudo :)

https://cursos.alura.com.br/course/angularjs-mvc/section/6/exercise/2

É neste exercício !

Bom estudo!

Ata,professor. Eu lembro sim.Até criei!! Mas fica na "atividade" ai que eu devo lhe chamar logo logo com dúvidas aqui neste topico

Oppa, como dito professor.poderia me explicar o porquê não pegamos um templete e sim atraves de uma img contruimos uma diretiva "minha-foto"?

ddo.templateUrl = '<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">'

A sintaxe que você me passou não esta correta:

ddo.templateUrl = '<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">'

Veja que você usou templateUrl. Quando usamos templateUrl precisamos definir o template da diretiva em um arquivo HTML!

No caso, como o template da imagem é pequeno, usamos template e definimos o HTML diretamente na diretiva.

Sobre ficar na atividade, nem sempre sou eu quem responde às dúvidas do fórum. Outros alunos podem responder. Eu me esforço para estar presente sempre que possível.

Sendo assim, código correto é

ddo.template = '<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">';

Ainda não está filtrando...

Filtrando? Mas o problema não é a exibição da foto no cadastro de fotos?

Você olhou no console do navegador para ver se alguma mensagem de erro é exibida?

Aparece erros de logs, mas é puxado para links do angular:

angular.min.js:102 TypeError: Cannot read property 'compile' of undefined
    at angular.min.js:47
    at r (angular.min.js:7)
    at Object.<anonymous> (angular.min.js:47)
    at Object.e [as invoke] (angular.min.js:36)
    at Object.$get (angular.min.js:34)
    at Object.e [as invoke] (angular.min.js:36)
    at angular.min.js:38
    at Object.d [as get] (angular.min.js:36)
    at ka (angular.min.js:63)
    at X (angular.min.js:52)(anonymous function) @ angular.min.js:102
Failed to parse SourceMap: http://localhost:3000/js/lib/angular.min.js.map
Failed to parse SourceMap: http://localhost:3000/js/lib/angular-route.min.js.map

Cole o código da sua diretiva aqui, do seu main.js, e do seu index.html, na íntegra.

Você ainda esta com problema na diretiva: ou não importou a diretiva, ou não adicionou-a como dependência em main, ou tem erro de digitação.

<!-- Código main.js -->

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

.config(function($routeProvider, $locationProvider){ //configurando uma rota

    $locationProvider.html5Mode(true); 
    $routeProvider.when('/fotos', { // chamando a rota e definindo que QUANDO (when), o usuario acessar a rota de '/fotos'...
     templateUrl: 'partials/principal.html', // enviaremos um tampleteUrl (nosso html) na view parcial
        controller: 'FotosController'  //indicando o controlador para a parcial chamada acima
    });


    $routeProvider.when('/fotos/news',{ // quando for acessada a rota fotos/news
        templateUrl: '/partials/foto.html', //vamos enviar esse tamplate
        controller: 'FotoController'
    });


    $routeProvider.when('/fotos/edit/:fotoId',{ //para linkar com o id da foto
        templateUrl : 'partials/foto.html',
        controller : 'FotoController'
    });


    $routeProvider.otherwise({redirectTo: '/fotos'}); //Se for digitada uma URL não existente, ele nos jogará para essa url determinada

}); //todas as diretivas criadas da sua aplicação,precisa ser definidas aqui
<!-- minhas diretivas -->

angular.module('minhasDiretivas', [])

.directive('meuPainel',function(){ // nomeda diretiva recebendo uma função para definir uma diretiva

    var ddo = {};
    ddo.restrict = "AE"; //definindo que nossa diretiva será usada como atributo e elemento (AE)
    ddo.scope={
    titulo:'@'

    };

    ddo.transclude =true;
    ddo.templateUrl = 'js/directives/meu-painel.html' 

   return  ddo; //toda diretiva deve retornar sempre um objeto 


})


.directive('minhaFoto',function(){

    var ddo ={};
    ddo.restrict ="AE";
    ddo.scope={
        url:'@',
    titulo: '@'

    };

    ddo.transclude = true;
    ddo.template = '<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">';

});
solução!

Quando você cria uma diretiva, você precisa retornar o object definition object. Veja que você não o retornou. Por isso Angular não consegue compilar a diretiva.

Muito obrigado, professor.

Só corrigindo o link para criar a diretiva minha-foto é

https://cursos.alura.com.br/course/angularjs-mvc/section/6/task/4