1

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?

3
  • can you show this function please? scope.setCroppedData(originalData);
    – micha
    Jan 29, 2015 at 23:40
  • Put directive on the image and should be using scope for the image ng-src. Use $apply whenever you change scope with third party code so angular knows to run a digest
    – charlietfl
    Jan 30, 2015 at 0:03
  • @micha fengyuanchen.github.io/cropper events from here Jan 30, 2015 at 5:36

1 Answer 1

0

In Angular's controller, changing the DOM manually is not suggested. You'd better use directive to handle content change as Angular will trigger the so called digest loop to check whether content binded to DOM element has been modified and update the DOM accordingly.

In you view, use ng-src instead of src and move the directive on element <img>:

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

Then in your directive, you can read the content from $scope.imagecontent. In the same way, when you want to update the content, you need to execute following code:

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

Once $scope.imagecontent is updated, the DOM would be refreshed by Angular automatically. So I suppose, the crop method in your directly may be like this:

$image.cropper({
   multiple: true,
   aspectRatio: 1.5,
   data: $scope.imagecontent,
   done: function(data) {
     $scope.evalAsync(function() {
       $scope.imagecontent = data;  
     });
   }
});
3
  • hm, seems that still only image without plugin executed Jan 30, 2015 at 6:46
  • It would be better you can share the code with us for debugging
    – Rebornix
    Jan 30, 2015 at 6:53
  • code sharing - unreal) to many code here) also ... when i add link, and set not angular.element("#image-crop-modal").on("shown.bs.modal", function() { but on click of this link - it's executed Jan 30, 2015 at 6:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.