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

Duvida: Dividir para conquistar!

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Dividir para conquistar! e atividade Colocando em prática

por Antonio Carlos R Santos Jr
| 16.8k xp | 4 posts

Estou com um erro no meu código e não consigo encontrar aonde é. O meu-painel estava funcionando perfeitamente até essa aula, mas agora em vez do painel aparece escrito "js/directives/meu-painel.html". O comportamento de filtro está funcionando, mas o painel não está sendo mostrado. Meu principal.html está assim:

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="row">
    <div class="col-md-12">
        <form>
            <input ng-model="filtro" ng-model-options="{debounce: 500}" class="form-control" placeholder="filtrar pelo título da foto" ng-model="filtro">
        </form>
    </div> <!-- fim col-md-12 -->
</div> <!-- fim row -->
<div class="row">
    <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
        <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    </meu-painel>
</div>

O meu-painel.html está assim

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

O jumbotron e o input field estão sendo mostrados corretamente, somente o meu-painel que não...

6 respostas
por Rodrigo Turini
| 190.4k xp | 468 posts
Instrutor Lider de desenvolvimento da Alura e VRaptor

Oi Antonio

Quando você diz que não é mostrado corretamente, se refere apenas ao estilo (css) do painel?

Notei que faltou a class="img-responsive center-block" dentro da imagem do painel, veja se colocando resolve o problema (;

por Antonio Carlos R Santos Jr
| 16.8k xp | 4 posts

Não é só no estilo do painel... ele não mostra nada do painel, somente o texto "js/directives/meu-painel.html" no lugar do painel (o texto mesmo, não o conteúdo do html).

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

Mostre-me o código da sua diretiva. Pode ficar tranquilo que mais de 1000 alunos pasaram dessa parte sem problema algum. A gente descobre.

por Antonio Carlos R Santos Jr
| 16.8k xp | 4 posts

Obrigado Flávio, eu estou fazendo muitos erros por conta de digitação (typo). Estou usando o Sublime. Existe alguma ferramenta de edição de código que me mostre logo de cara que eu digitei errado (por ex: imput em vez de input)? Segue cógido da diretiva:

angular.module('minhasDiretivas', [])
.directive('meuPainel', function( ) {
    var ddo = {};
    ddo.restrict = "AE";

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

ddo.transclude = true;

ddo.template = 'js/directives/meu-painel.html';

    return ddo;
})
.directive('ninhaFoto', function( ) {
    var ddo = {};
    ddo.restrict = "AE";

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

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

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

Oi Antonio!

Veja a linha:

ddo.template = 'js/directives/meu-painel.html';

O correto é templateUrl quando apontamos para um arquivo.

por Antonio Carlos R Santos Jr
| 16.8k xp | 4 posts

Muito obrigado Flávio!