我如何更改ng-class更改$ scope.value?

时间:2015-07-29 22:45:28

标签: javascript angularjs

我遇到的问题很简单但我找不到解决方案。

我需要在更改$ scope.value后更改ng-class。

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

我的角色:

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;
        }
    };
}]);

可以多次更改ng-class? 谢谢你的帮助!

1 个答案:

答案 0 :(得分:2)

您需要$scope.$apply才能通知角度更改。

onload方法更改为

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