ngImgCrop not working inside angular ui modal about ngimgcrop HOT 5 OPEN

I was able to make it work by changing the way the file input is manipulated. I create a directive to check the file input like:

app.directive('customOnChange', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var onChangeHandler = scope.$eval(attrs.customOnChange);
            element.bind('change', onChangeHandler);
        }
    };
});

then in the html:

<div>Select an image file: <input custom-on-change="handleFileSelect" type="file" id="fileInput"/></div>

and inside the modal controller:

$scope.handleFileSelect = function (evt) {
        var file = evt.currentTarget.files[0];
        $scope.$apply(function ($scope) {
            $scope.myImage = URL.createObjectURL(file);
        });
    };

from ngimgcrop.

Hi,

I've had the same probleme and i resolved it like you, with $timeout but without delay.
$timeout(function() {
}/* no delay here */);

It's probably because the modal opening is an async action and you have to delay the directive DOM loading in order that they not be run in the same cycle.

from ngimgcrop.

Although I don't have the code anymore, as I've changed from a modal back into a regular page for another reason, I didn't need to set a timeout. Just my 2c

from ngimgcrop.

Hi, I'm having exactly the same issue : but copying the sample code into a modal, it doesn't work.
Adding a time with no delay fix the issue ...

from ngimgcrop.

Matthieu, if the code running in an instance of a child controller for ngImgCrop, try to keep the controller the same as the parent. Both UI-Bootstrap and AngularStrap allow you to do both methods, but I had greater success with the parent controller.

from ngimgcrop.