4

Estou criando em um sistema que estou desenvolvendo para nosso cliente, uma função onde permite o mesmo fazer o upload da logo e cortar a mesma, em seguida quando ele salva estou tentando carregar a imagem que foi realizado o upload, mas acontece que preciso que sempre seja o mesmo nome e no mesmo destino e o navegador não consegue atualizar a mesma, por exemplo:

Nome atual da imagem = logo.png;

depois do upload o nome da imagem continua logo.png mas com outra imagem salva, pois se recarrego a página a logo é aplicada como deve, gostaria de saber se tem alguma forma de fazer isso sem recarregar a pagina, segue o código que uso para setar a imagem:

$scope.carregarLogo = function(name){
    if($scope.img_name=== '' && angular.isUndefined(name) || name === ''){
       $scope.img_name = url_sistema + 'web_files/img/logo.png';
       $('#img').attr('src',$scope.img_name);
       console.log('deu');
    }else{
       $scope.img_name = name;
       $('#img').attr('src',$scope.img_name);
       console.log($('#img').attr('src'));
       console.log('deu2');
    }
};
3
  • +1. Já tive o mesmo problema mas não achei a solução, então contornei o problema usando $window.location.reload(); Commented 4/02/2016 às 13:21
  • Techies, isso não resolve o problema. Só cria uma gambeta e impede você de entender o AngularJS da forma certa. Commented 4/02/2016 às 13:52
  • @JuanBiscaia Por isso dei o +1 e como comentei eu não achei a solução, e também disse que "contornei" o problema. Não disse que era a solução pro problema rs. Commented 4/02/2016 às 13:59

2 Respostas 2

2

Misturar AngularJS com jQuery dentro do seu controlador nunca é uma boa idéia, porque os dois são frameworks com propósitos diferentes. o jQuery é para manipulação do DOM e o AngularJS é para manipulação de dados com influencia sobre o DOM.

Basicamente, para resolver seu problema, você precisa "pensar na maneira AngularJS" e esquecer o que você conhece de jQuery, pelo menos no começo.

Uma possivel solução para seu problema:

$scope.carregarLogo = function(name){
    if($scope.img_name=== '' && angular.isUndefined(name) || name === ''){
       $scope.img_name = url_sistema + 'web_files/img/logo.png';
    }else{
       $scope.img_name = name;
    }
};
<div ng-controller="SeuController">
  <img ng-src="{{img_name}}">
</div>

Assumindo que sua function carregarLogo esta dentro de um controller. Note que no html estou usando uma directive nativa do angular, o ngSrc.

Agora voltando ao assunto "usar jQuery dentro do angular". Sempre que precisar fazer isso, crie uma directive para colocar suas manipulações de DOM dentro. E sempre que for mudar valores do $scope através de funções do jQuery use o $scope.apply() logo em seguida para atualizar os valores do escopo (dentro da directive).

2
  • Complementar ao que ele disse, "pensar na maneira AngularJS", você não precisa definir as funções sempre deste modo: $scope.carregarLogo = function(). Utilize essa definição somente se a função precisar ser chamada direto de sua view (de um arquivo html). Se ela estiver somente dentro do seu controller, não tem problema definir assim: function carregarLogo() ou var carregarLogo = function(). Pois ao definir um $scope, você cria um novo objeto ao $watcher, o que pode pesar sua aplicação a longo prazo. Commented 4/02/2016 às 14:15
  • Sim, e recomendo também ler padrões de design para criar aplicações mais claras, esse daqui é um que uso em muitos projetos e é ótimo tanto para grandes como para pequenos projetos. AngularJS style guide em Portugues Commented 4/02/2016 às 15:07
1

Galera, achei uma solução aqui, dessa forma não preciso dar o reload na pagina, masss tem um único problema, não pode ser adicionado uma imagem com o nome que sempre será o mesmo (ex:logo.png) a pasta de onde será selecionada essa imagem para setar em algum , pois senão não vai funcionar, a unica forma de funcionar é quando eu crio o arquivo por PHP, porque ai não vai precisar substituir o arquivo que existe ai funciona, segue o código se quiserem testar, fiquem a vontade:

$scope.carregarLogo = function (name) {
    if ($scope.img_name === '' && angular.isUndefined(name) || name === '') {
        $scope.img_name = url_sistema + 'web_files/img/logo.png';
        $('#img').attr('src', $scope.img_name);
        console.log('deu');
    } else {
        var random = (new Date()).toString();
        $scope.img_name = name + "?date=" + random;
        console.log($scope.img_name);
        $('#img').attr('src', $scope.img_name);
        console.log($('#img').attr('src'));
        console.log('deu2');
    }
};

AGRADEÇO A AJUDA DE VOCÊS, MUITO, UM ÓTIMO DIA A TODOS FLW

3
  • A única doisa que acrecentei foi depois do }else{ var random = (new Date()).toString(); ------ e quando a a variável $scope.img_name recebe os dados, foi a única coisa que alterei, obrigado, espero que ajude vocês também
    – Tales Born
    Commented 4/02/2016 às 15:12
  • Que bom que você conseguiu resolver, mas uma coisa é certa, vc vai encontrar mais problemas pela frente, se continuar seguindo essa idéia de misturar Angular com jQuery, agora vc resolveu, mas logo vc vai começar a encontrar bugs mais "cabulosos" sem conseguir entender de onde eles estão saindo. Sua solução é valida para o seu problema, mas não serve como exemplo para mostrar como usar o AngularJS corretamente. Commented 4/02/2016 às 15:15
  • Entendi Juan, sei que misturar as linguagens não é recomendado, e também não é com toda certeza a melhor forma de resolver, agradeço pela sua ajuda amigo, tenha uma ótima tarde, até mais!
    – Tales Born
    Commented 4/02/2016 às 15:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .