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)

Aula 06 - Aparecer a imagem na hora de Salvar Objeto

Durante toda a aula está tudo ok , estou clicando no botão salvar e aparece os dados do objeto abaixo , porém a imagem que gostaria que aparecesse ao lado não aparece .

Segue o meu código .

minhas-diretivas.js

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

// Sempre precisa retornar um DDO 

        var ddo = {};

        ddo.restrict = "AE";

        // A = Atributte , E = Element

        // Não confundir $scope do controller com esse scope da diretiva . 

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

        //Manter os elementos filhos quando angular manter HTML
        ddo.transclude=true;

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



        return ddo;

})

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

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

    };


    ddo.templateUrl ='js/directives/minha-foto.html' ;

    return ddo;

});

//minha-foto.html

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


//index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <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">
        <link rel="stylesheet" href="css/efeitos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/lib/angular-animate.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/controllers/fotoindex.-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/lib/angular-route.min.js"></script>

    </head>
    <body>
      <div class="container">
        <ng-view></ng-view>       

        </div>       
    </body>
</html>

//principal.html

<div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <form>
                        <div class="input-group">

                        <span class="input-group-btn">
                            <a href="fotos/new " class="btn btn-primary" type="button">Nova Foto</a>    
                        </span>
                        <input ng-model="filtro" ng-model-options="{debounce:500}" class="form-control" placeholder="filtrar"/>
                        </div>
                    </form>
                </div> <!-- Fim da Col12 -->
            </div><!-- Fim da 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>

// foto.html

<div class="page-header text-center">
    <h1>{{foto.titulo}}</h1>
</div>

<form name="formulario" class="row" ng-submit="submeter()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Titulo</label>
            <input name="titulo" class="form-control" ng-model="foto.titulo">
        </div>
        <div class="form-group">
            <label>URL</label>
            <input name="url" class="form-control" ng-model="foto.url">
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="descricao" class="form-control" ng-model="foto.descricao">

            </textarea>
        </div>

        <button type="submit" class="btn btn-primary">
        Salvar
        </button>
        <a href="/" class="btn btn-primary">Voltar</a>
        <hr>
    </div>
    <div class="col-md-6">
        <minha-foto>
        // </minha-foto>
    </div>
</form>


//main.js

angular.module('alurapic', ['minhasDiretivas','ngAnimate' , 'ngRoute'])
.config(function($routeProvider, $locationProvider){

    // BackEnd fora do servidor
    $locationProvider.html5Mode(true);

    $routeProvider.when('/fotos', {

        templateUrl:'partials/principal.html',
        controller: 'FotosController'
    });

    $routeProvider.when('/fotos/new', {

        templateUrl:'partials/foto.html',
        controller:'FotoController'    
    });


    $routeProvider.otherwise({ redirectTo: '/fotos'});



});

//meu-painel.html

<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>

//foto-controller.js

angular.module('alurapic').controller('FotoController', function($scope){

 $scope.foto = {};

 $scope.submeter= function(){

     //terá que apresentar todos os dados da foto que acabei de cadastrar . 
     console.log($scope.foto);


 };

});

Qualquer ajuda será bem vinda !

3 respostas
solução

Veja no seu código, que em foto.html você está usando a diretiva minha-foto sem passar url nem título.

Outra coisa, comentário com // não funciona no html. Tem que ser <!-- código comentado -->. Mas vi que usou // no conteúdo d a diretiva que não deve ter conteúdo, porque não suporta transclusāo. Curioso é que na outra página você usou a diretiva corretamente.

Flávio você é o cara ! Realmente não sei como consegui esquecer de passar o titulo e a url , é muita informação que as vezes nós nos perdemos , mas é bom que isso mostra a necessidade de revisar sempre o conteúdo e praticar . Muito Obrigado !!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software