ngImgCrop inside Angular Bootstrap UI tabset

[jselesan]

Hi all! I'm using ngImgCrop inside a tabset of Angular Bootstrap UI (https://angular-ui.github.io/bootstrap/) and after a small workaround I finally made it work, but I still have an issue: if I load an image, crop it, and then I change the tab, when I go back to the tab with ngImgCrop, the source image looks smaller, and the cropped image is equals to the whole source image (i.e. I lost the crop).

I think that it is related to how tabset handles the tab change, but I couldn't found a way to face this issue

[tommykennedy]

What was the workaround? Im looking to get this to work in a Modal and I'm not able?

[ghost]

Issues with tabs in Material Design too: when put inside a tab, the original image window won't be populated with a selected image.

[xeroxoid]

@jselesan any chance you can post the workaround? I am having the same problem with angular-material tabs (md-tabs) as @oharlem noted...

[nsulistiyawan]

hi, any updates on this? having the same problem :sweat_smile:

[sahidul03]

Hey, I'm facing same problem. Any solution for this?

[stansongman]

I have been using ng-img-crop with Ionic/AngularJS 1.0 . I was encountering the same kinds of issues in a number of these posts. My solution was in how I was declaring my vars in the $ionicModal template. I hope this is helpful. I'm guessing this applies to a number of the problems folks have reported.

I had started by defining $scope.displayImage and $scope.editedImage. My problem was that $scope.editedImage was never getting updated when I exited the modal. I tried adding timeouts/etc., with no results.

I changed my vars as follows:

$scope.data={}; $scope.data.displayImage='./img/perry.img' // whatever your starting point is. $scope.data.editedImage='./img/perry.img' // again, app-specific.

In my modal template:

<img-crop image="data.originalImage" result-image="data.editedImage" change-on-the-fly="true"

It all works great now.