Change System Logo

Asked

Viewed 293 times

4

I am creating in a system that I am developing for our client, a function where it allows the same to upload the logo and cut the same, then when it saves I am trying to load the image that was uploaded, but it turns out I always need to be the same name and in the same destination and the browser can’t update the same one, for example:

Current image name = logo.png;

after uploading the image name continues logo.png but with another image saved, because if you reload the page the logo is applied as it should, I wonder if you have any way to do this without reloading the page, follow the code that I use to set the image:

$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');
    }
};
  • +1. I have had the same problem but I did not find the solution, so I added the problem using $window.location.reload();

  • Techies, this does not solve the problem. It only creates a gambit and prevents you from understanding Angularjs in the right way.

  • @Juanbiscaia So I gave the +1 and as I commented I did not find the solution, and also said that "I agreed" the problem. I didn’t say it was the solution to the problem rs.

2 answers

2

Mixing Angularjs with jQuery within your controller is never a good idea, because the two are frameworks with different purposes. jQuery is for DOM manipulation and Angularjs is for DOM-influenced data manipulation.

Basically, to solve your problem, you need to "think in the Angularjs way" and forget what you know of jQuery, at least at first.

A possible solution to your problem:

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

Assuming that your Function carregarLogo is inside a controller. Note that in html I am using a native angular Directive, the ngSrc.

Now returning to the subject "use jQuery within the angular". Whenever you need to do this, create a Directive to put your DOM manipulations inside. And whenever changing $Scope values through jQuery functions use the $scope.apply() then to update the scope values (inside Directive).

  • Complementary to what he said, "think of the Angularjs way", you do not need to define the functions always this way: $scope.carregarLogo = function(). Use this setting only if the function needs to be called directly from your view (from an html file). If it’s only inside your controller, it’s no problem to set it like this: function carregarLogo() or var carregarLogo = function(). For in defining a $scope, you create a new $Watcher object, which can weigh your long-term application.

  • Yes, and I also recommend reading design patterns to create clearer applications, this one is one that I use in many projects and is great for both large and small projects. Angularjs style guide in English

1


Guys, I found a solution here, so I do not need to give the page the Reload, masss has a single problem, can not be added an image with the name that will always be the same (eg:logo.png) the folder from which will be selected this image to set in some , because otherwise will not work, the only way to work is when I create the file by PHP, because then you will not need to replace the file that exists there works, follow the code if you want to test, feel free:

$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');
    }
};

THANK YOU FOR YOUR HELP, A VERY, GREAT DAY TO ALL FLW

  • The only two I added was after }Else{ var Random = (new Date()). toString(); ------- and when the variable $Scope.img_name receives the data, it was the only thing I changed, thank you, I hope it helps you too

  • Good that you managed to solve, but one thing is for sure, you will find more problems ahead, if you keep following this idea of mixing Angular with jQuery, now you solved, but soon you will start to find more "cabulosos" bugs without being able to understand where they’re coming from. Your solution is valid for your problem, but does not serve as an example to show how to use Angularjs correctly.

  • I understand Juan, I know that mixing the languages is not recommended, and is also certainly not the best way to solve, thank you for your help friend, have a great afternoon, see you more!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.