ngImgCrop doesn't work properly when using ngShow in my Angular App

[kabrice]

I'm customizing ngImgCrop with ngShow and ngFileUpload to implement it on one of my project.

Here is a sample of my code :

<div class="upload-image" ng-show="showImageUpload">
<div>
    <button type="file"
            id="upload" ngf-drop ng-model="picFile" ngf-pattern="'.jpg, .jpeg, .png, !.gif'" ngf-select="clicImportPhoto()"
            ng-model="picFile" ngf-max-size="8MB" accept="image/x-png,image/jpeg,image/jpg"
            class="btn btn-lg btn-primary btn-upload ">Import image</button>
</div>
</div>
<div ng-show="showImageSubmit">
    <div class="cropArea">
        <img-crop image="picFile  | ngfDataUrl"
                  result-image="croppedDataUrl" ng-init="croppedDataUrl=''" >
        </img-crop>
    </div>
    <div style="margin: auto; text-align: center;">
        <button type="button" class="btn btn-lg btn-primary btn-upload " ng-click="clicUpload(croppedDataUrl, picFile.name)">
            Submit</button>
    </div>
</div>
<div ng-show="showImageCropped ">
    <img class="img-circle" ng-src="{[{croppedDataUrl}]}" width="150" height="150" />
</div>

app.js

angular.module("MyApp", ["ngSanitize", ..., "ngFileUpload", "ngImgCrop"])
.config(function($interpolateProvider, $httpProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');

})
.controller("MyCtrl", ['$filter','$http', 'Upload', ..., 'contenuService',

    function ($filter,$http,   $scope, ..., $sce, $location, $interval) {

        $scope.showImageUpload = true;
        $scope.showImageSubmit = false;
        $scope.showAlmostDone = false;
        $scope.showImageCropped=false;

$scope.clicImportPhoto = function () {
    $scope.showImageSubmit = true;
    $scope.showImageUpload = false;
}

$scope.clicUpload = function(croppedDataUrl, picFileName){

    //...
    $scope.showImageSubmit = false;
    $scope.showImageCropped = true;
}


}])

Here are the events occuring :

• When I click on "Import image", I import an image properly and the div with "showImageUpload" disappears and the one with "showImageSubmit" (or with a submit button) appears .

• When I click on "submit", after cropping my image of course, the div with "showImageCropped" appears, but with a not cropped image although I put ng-src="{[{croppedDataUrl}]}", and here is my problem. But it works very great if I remove the ngShows.

Why I've a not cropped image in the div with "showImageCropped" when using ngShow? I want my cropped image displaying here. How can I perform that after performing a ng-show ?

Many thanks in advance for you help.

[glneto]

+1

I have a similar problem.
When hiding the div where the crop area is, it maintain the crop area, but appears to lose the cropp size information.
That also happens if I set the container div position to absolute.
If I show the div again, it will show me the cropped area on the right position, but the width and height of the selection are lost.

[glneto]

I was able to workaround this listening to the change event.

on-change="settingsDetailCtrl.changeCrop($dataURI)"

Each time the crop changes, I save the data on another variable in my controller,
if the crop container is not hidden.

self.changeCrop = function (img) {
    if (!self.hidden) {
        self.cropped = img;
    }
}

With this, when I hide the container, it will try to update to the wrong sized crop but my "hidden" variable will not allow it and will keep the correctly cropped data.