ngImgCrop Directive

[Thomas Kennedy]

I am using the ngImgCrop angular directive to resize and crop an image. However when I try and use it inside a UI Modal controller it doesn't work. 

The issue I believe is that the below line does not get properly set because the DOM is not created. The handlefileselect function never gets called?!

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

Does anybody know how to properly use this directive inside a Modal or how to make this work?
The modal contoller code is here
.controller('ProfilePictureModalInstanceCtrl', function ($scope, $modalInstance, items,$timeout) {

    $scope.myImage = '';
    $scope.myCroppedImage = '';

    var handleFileSelect = function (evt) {

        alert("Here");

        var file = evt.currentTarget.files[0];
        var reader = new FileReader();
        reader.onload = function (evt) {
            $scope.$apply(function ($scope) {
                $scope.myImage = evt.target.result;
            });
        }
        reader.readAsDataURL(file);
    }


    angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

    $scope.ok = function () {
        $modalInstance.close($scope.optionItems);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

[Sander Elias]

Hi Thomas,

use a $timeout to execute your init in the next digest round. The view will be ready by then, so you can attach your jQuery thingie then.

Regards

Sander 

[Thomas Kennedy]

Hi Sander,

I did it with a ten second delay but nothing worked. The timeout function works as the console prints out here but yet again the handlefileselect never gets executed

    $timeout(function() {

        console.log("Here");

        angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

    },10000);

[Thomas Kennedy]

As another solution I have tried to take away the need of using the angular.element by making a directive but it does not seem to return a value to the model.

Any ideas why the modelValue doesn't return any value?

<input type="file" id="fileInput" multiple ng-model="imagefile" file-feed/>

.directive('fileFeed', [

        function() {

            return {

                restrict: 'A',

                require: 'ngModel',

                link: function(scope, element, attributes, controller) {

                    element.bind("change", function(changeEvent) {

                        //alert("fired");

                        //alert(element[0].files.length);

                        var files = [];

                        for (var i = 0; i < element[0].files.length; i++) {

                            alert(element[0].files[i].name);

                            files.push(element[0].files[i]);

                        }

                        scope.$apply(function(){

                            controller.$modelValue = files;

                            

                            console.log(controller.$modelValue[0].name);

                        });

                    });

                }

            };

        }

    ]);