angularJS наблюдать за изменение изображений

Question

В моем приложении у меня есть такое мнение:

 <div class="r-container" image-crop> 
     <img id="photo-cropper" src=""> 
     </div> 

ЦСИ для изображения настройки в контроллере (после imageuploading в браузер):

$scope.files = files;   
var reader = new FileReader(); 
reader.onload = function(e) { 
    $('#photo-cropper').attr('src', e.target.result); 
}; 
reader.readAsDataURL(files[0]); 

, а затем у меня есть такой директива (может быть, есть немного JQuery стиль, но, скажем, это нормально):

.directive('imageCrop', function() { 
    return { 
     restrict: 'EA', 
     link: function postLink(scope, element, attrs) { 
     var $image, originalData; 

       angular.element("#image-crop-modal").on("shown.bs.modal", function() { 
        console.log('postLink'); 
        $image = angular.element(".r-container > img"); 
        originalData = {}; 
        $image.cropper({ 
        multiple: true, 
        aspectRatio: 1.5, 
        data: originalData, 
        done: function(data) { 
         console.log(data); 
        } 
        }); 
       }); 
       angular.element("#save-cropper").click(function() { 
        originalData = $image.cropper("getDataURL"); 
        console.log(originalData); 
        angular.element('#image-crop-modal').modal('hide'); 
        scope.setCroppedData(originalData); 
        $image.cropper("destroy"); 
       }); 

     } 
    }; 
    }); 

и поэтому этот imageCropper является заявл yed only, если в коде зрения я определяю src по умолчанию, когда я изменяю его в контроллере: ничего не происходит - обрезщик не работает: но почему? Как установить его на новом изображении src?

Answer 1

В контроллере Angular, изменение DOM вручную не предлагается. Вам лучше использовать директиву для обработки изменения контента, поскольку Angular вызовет так называемый digest loop, чтобы проверить, был ли изменен контент, привязанный к элементу DOM, и соответствующим образом обновить DOM.

В просмотре, использование нг-Src вместо ЦСИ и переместить директиву на элемент <img>:

<div class="r-container"> 
    <img id="photo-cropper" ng-src="imagecontent" image-crop> 
</div> 

Затем в директиве, вы можете прочитать содержимое из $scope.imagecontent. Точно так же, если вы хотите обновить содержимое, необходимо выполнить следующий код:

$scope.evalAsync(function() { 
    $scope.imagecontent = newContent; 
}); 

После $scope.imagecontent обновляются, то DOM будет обновляться по Угловому автоматически. Поэтому я полагаю, что метод урожая в вашем прямом виде может быть таким:

$image.cropper({ 
    multiple: true, 
    aspectRatio: 1.5, 
    data: $scope.imagecontent, 
    done: function(data) { 
    $scope.evalAsync(function() { 
     $scope.imagecontent = data; 
    }); 
    } 
});