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

Bug no projeto. Caixas infinitas sendo criadas sem imagens

Após o término da aula 9, fui realizar os procedimentos explicados no vídeo, porém, após adicionar a última diretiva, o erro k is not a function não apareceu, em vez disso, aparecem caixas infinitas com Alurapic ao invés da imagem do item. Como posso resolver ?

angular.module('minhasDiretivas', []).directive('meuPainel', function(){
    var ddo = {};
    ddo.restrict = 'AE'; // AE = Atribute Element
    ddo.scope = {
        titulo:'@'
    }
    ddo.transclude = true;
    ddo.templateUrl = 'js/directives/meuPainel.html';
    return ddo;
}).directive('minhaFoto', function(){
    var ddo = {};
    ddo.restrict = 'AE';
    ddo.scope = {
        titulo:'@',
        url:'@'
    }
    ddo.templateUrl = 'js/directives/meuBotao.html';
    return ddo;
}).directive('meuBotaoPerigo', function(){
    var ddo = {};
    ddo.restrict = 'E';
    ddo.scope = {
        nome:'@',
        acao:'&'
    };
    ddo.templateUrl = 'js/directives/meuBotaoPerigo.html';
    return ddo;
});
<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<!-- fim jumbotron -->
<p class="alert alert-info" ng-show="mensagem.length">{{mensagem}}</p>
<!-- Filtro -->
<div class="row">
    <div class="col-md-12">
        <form>
            <div class="input-group">
                <input type="text" name="" placeholder="filtrar..." class="form-control" ng-model="filtro">
                <span class="input-group-btn">
                <a href="fotos/new" class="btn btn-primary">Adicionar Foto</a>
                </span>
            </div>
        </form>
    </div>
</div>
<!-- \.Filtro -->
<!-- Meu painel -->
<div class="row">
    <meu-painel ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}" class="painel-animado" ng-model-options="{debounce:500}">
        <minha-foto url="{{foto.url}}" alt="{{foto.titulo}}"></minha-foto>
        <a href="fotos/edit/{{foto._id}}" class="btn btn-primary btn-block">Editar</a>
        <meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>
    </meu-painel>
</div>
<!-- \.Meu painel -->
<button class="btn btn-danger btn-block" ng-click="acao(foto)">{{nome}}</button>
3 respostas

Tem coisas inconsistentes no seu código. Precisamos resolver, porque eu não entendi.

No template da diretiva minhaFoto você esta apontando para um HTML chamado meuBotao.html. O que é isso? É uma imagem, porque você esta apontando para um template de botão?

No caso, o template é um documento html com a própria estrutura do botão. E mesmo colocando como ddo.template = '<button class="btn btn-danger btn-block" ng-click="acao(foto)">{{nome}}</button>'; na diretiva, ocorre o mesmo erro. abaixo um link com o print do erro

https://drive.google.com/open?id=0B8AhqmUgCKAfU2xTbWdqcl80TUE

solução!

Você esta usando um template de botão para a imagem? Não entendi. Você reparou que no seu código, na diretiva da imagem você esta apontado para um template que para mim, não tem nada a ver com imagem? Esta apontando para um template de botão. Cadê a marcação da imagem?

Ficou confuso para mim, pois você mudou a estrutura do que apresento no curso. Para mim, um botão não tem relação com imagem.

Confere aqui:

}).directive('minhaFoto', function(){
    var ddo = {};
    ddo.restrict = 'AE';
    ddo.scope = {
        titulo:'@',
        url:'@'
    }
    ddo.templateUrl = 'js/directives/meuBotao.html';
    return ddo;

Viu o meuBotao.html? Mas você esta na diretiva minhaFoto!