In my app i have such view:
<div class="r-container" image-crop>
<img id="photo-cropper" src="">
</div>
src for image is setting up in controller (after imageuploading to browser):
$scope.files = files;
var reader = new FileReader();
reader.onload = function(e) {
$('#photo-cropper').attr('src', e.target.result);
};
reader.readAsDataURL(files[0]);
and then i have such directive (maybe there is a little bit jQuery style, but let's say it's ok):
.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");
});
}
};
});
and so this imageCropper is applyed only, if in view code i define src by default, when i change it in controller: nothing happens - cropper didn't work: but why? How to set it on new image src?
ng-src
. Use$apply
whenever you change scope with third party code so angular knows to run a digest