javascript - 我如何更改更改 $scope.value 的 ng 类？

Question

我遇到了一个很简单的问题，但我还没有找到解决方案。

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

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

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

可以多次更改 ng-class 吗？ 感谢您的帮助!

Answer 1

你需要 $scope.$apply 来通知 Angular 变化。

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