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

Botão editar não exibe o conteúdo da foto

Provavelmente vai ser alguma besteira, mas já olhei 1000 x , espero que um olhar diferente encontre meu erro.

FotoController:

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

  $scope.foto = {};
  $scope.mensagem = "";

  if ($routeParams.fotoId) {
    $http.get('/v1/fotos/' + $routeParams.fotoId)
    .success(function(foto) {
      $scope.foto = foto;
    })
    .error(function(erro) {
      console.log(erro);
      $scope.mensagem = 'Não foi possível obter a foto'
    });
  }

  $scope.submeter = function () {
    if ($scope.formulario.$valid) {
      $http.post('v1/fotos', $scope.foto)
      .success(function () {
        $scope.foto = {};
        $scope.mensagem = "Foto cadastrada com sucesso"
      })
      .error(function (erro) {
        console.log(erro);
        $scope.mensagem = "não foi possível cadastrar a foto"
      });
    }
  }
});

principal.html:

<div class="jumbotron">
  <h1 class="text-center">Alurapic</h1>
</div>
<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<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">Nova Foto</a>
        </span>

        <input ng-model="filtro" ng-model-options="{debounce: 500}" class="form-control" placeholder="filtrar">

      </div>
    </form>
  </div>
</div>

<div class="row">
  <meu-painel class="col-md-2 filtro-animado" ng-repeat="foto in fotos | filter: {titulo: filtro}" titulo="{{foto.titulo}}">
    <minha-foto url="{{foto.url}}" alt="{{foto.titulo}}"></minha-foto>
    <a href="/fotos/edit/{{foto._id}}" class="btn btn-primary btn-block">Editar</a>
    <button ng-click="remover(foto)" class="btn btn-danger btn-block">Remover</button>
  </meu-painel>
</div>

main.js:

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

  $locationProvider.html5Mode(true);

  $routeProvider.when('/fotos', {
    templateUrl: 'partials/principal.html',
    controller: 'FotosController'
  });

  $routeProvider.when('/fotos/new', {
    templateUrl: 'partials/foto.html',
    controller: 'FotoController'
  });

  $routeProvider.when('/fotos/edit/:fotoID', {
    templateUrl: 'partials/foto.html',
    controller: 'FotoController'
  });

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

Inclusive agora avancei pro outro capitulo, fiz o download do arquivo completo que é disponibilizado na primeira aula, olhei item por item e não achei a diferença, é possível que o erro possa estar no backend? Já não sei mais o que fazer.

solução!

Oi Christian,

Olhei aqui e achei uma possível solução.

Lá em FotoController você acessa a proprieadade $routeParams.fotoId, porém, lá na configuração da rota em main.js está declarado que o parâmetro se chama fotoID, com letras maiúsculas.

A rota para a edição deveria estar assim para que o id da foto seja acessível em FotoController:

  $routeProvider.when('/fotos/edit/:fotoId', {
    templateUrl: 'partials/foto.html',
    controller: 'FotoController'
  });

Era isso mesmo Artur, muito obrigado pelo auxilio, é até feio depois de tantos cursos errar uma coisa dessas, mas quando postei aqui já não sabia mais o que fazer. hahaha

Valeu. Uma boa semana!

Isso faz parte Christian. Erros de digitação só acabam quando a gente parar de fazer código. Torço pra continuar fazendo hahahaha

Boa semana pra você também!