CODEWITHSUNDEEP
javascriptangularjs
Thiago Bittencourt Ribeiro
Thiago Bittencourt Ribeiro

Reputation: 21

How I change a ng-class changing a $scope.value?

I'm with a problem that can be simple but I have not found a solution.

I need change a ng-class after changing a $scope.value.

<img src="" alt="" class="img-photo-thumb" ng-class="{'show-photo': photoThumb}">

My angularjs:

angular.module('dh-page')
.controller('MyController', ['$scope', function($scope) {
    $scope.initDomEvents = function() {
        document.getElementById("fileUploadPhoto").addEventListener('change', handleFileSelect, false);
    };

    var handleFileSelect = function(event) {
        var file = event.target.files[0];
        $scope.photo_upload = file;

        var render = new FileReader();
        render.readAsDataURL(file);
        render.onload = function(event) {
            var _thumb = document.getElementsByClassName('img-photo-thumb')[0];
            _thumb.src = event.target.result;
            // Here I change the value but nothing changes in html
            $scope.photoThumb = true;
        }
    };
}]);

It's possible make changes in ng-class multiple times? Thanks for help!

Upvotes: 1

Views: 80

Answers (1)

Bryan Chen
Bryan Chen

Reputation: 46608

You need $scope.$apply in order to notify angular the changes.

Change the onload method to

render.onload = function(event) {
    $scope.$apply(function() {
        var _thumb = document.getElementsByClassName('img-photo-thumb')[0];
        _thumb.src = event.target.result;
        // Here I change the value but nothing changes in html
        $scope.photoThumb = true;
    });
}

Upvotes: 2

Related Questions