koorgoo / ngCropper

AngularJS wrapper for https://github.com/fengyuanchen/cropper
107 stars 72 forks source link

Cropper preview stopped working in Angular 1.4 #19

Open sebastialonso opened 8 years ago

sebastialonso commented 8 years ago

As was updated in #9, the directive change its syntax, I updated that.

Now the cropper is not populating the file or data variables (all taken from the demo)

$scope.previewThis = function() {
  if (!file || !data) {
    console.log("Oops"); # <- Here's the issue
    return;
  }
  Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
    #do things...
  });
};

Here's the view with the updated syntax

<a ng-click="previewThis()" class="btn btn-primary btn-lg pull-right" style="margin-bottom:10px; width:100%;">Cortar</a>
<div ng-if="dataUrl" class="img-container">
        <img ng-if="dataUrl" ng-src="{{dataUrl}}" 
          ng-cropper
          ng-cropper-show="showEvent"
          ng-cropper-hide="hideEvent"
          ng-cropper-options="options">
</div>

Anything that I might be missing? Any pointers? Thanks.

sebastialonso commented 8 years ago

Ok, I solved this. An additional change was necessary in the $scope.options object: (coffeescript btw)

before

$scope.options =
      maximize: false
      aspectRatio: 1.6
      done: (dataNew) ->
        data = dataNew
        return

now

$scope.options =
      maximize: false
      aspectRatio: 1.6
      crop: (dataNew) ->
        data = dataNew
        return

I'm nor really sure if this kind of change should appear in the README, but it would save A LOT of time for other people