我使用的是ngImgCrop角指令来调整大小和裁剪图像。然而，当我尝试使用它的用户界面模态控制器，它里面不起作用。

我相信这个问题是下面的行没有得到适当的设置，因为未创建DOM。该handlefileselect功能不会被调用？！

有谁知道如何正确使用该指令一个模式内或如何使这项工作？

  angular.element（document.querySelector（'＃的FileInput'））上（'变化'，handleFileSelect）。 

模态位指示code是这里

  .controller（'ProfilePictureModalInstanceCtrl'，函数（$范围，$ modalInstance，物品，$超时）{    $ scope.myImage ='';    $ scope.myCroppedImage ='';    VAR handleFileSelect =功能（EVT）{        警报（在这里）;        var文件= evt.currentTarget.files [0];        VAR读卡器=新的FileReader（）;        reader.onload =功能（EVT）{            $范围。$应用（函数（$范围）{                $ scope.myImage = evt.target.result;            }）;        }        reader.readAsDataURL（文件）;    }    angular.element（document.querySelector（'＃的FileInput'））上（'变化'，handleFileSelect）。    $ scope.ok =功能（）{        $ modalInstance.close（$ scope.optionItems）;    };    $ scope.cancel =功能（）{        $ modalInstance.dismiss（'取消'）;    };}）; 

解决方案

您怀疑是即期。我有一个类似的问题，问题是该行：

  angular.element（document.querySelector（'＃的FileInput'））上（'变化'，handleFileSelect）。 

这里的问题是您尝试绑定可能不是当时你的绑定存在的DOM元素上的事件。我发现周围的工作是其他人（这里更多信息 ）使用。解决方法是包裹在超时像下面的绑定：

  $超时（函数（）{    angular.element（document.querySelector（'＃的FileInput'））上（'变化'，handleFileSelect）。}，1000，FALSE）; 

以上会尽量做到结合模态控制器code后，一秒钟后执行。如有必要，可以增加延迟。

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?!

Does anybody know how to properly use this directive inside a Modal or how to make this work?

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

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');
    };
});

Your suspicion is spot on. I had a similar issue and the problem is with that line:

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

The problem here is you are trying to bind an event on a DOM element that might not exist at the time you do the binding. I found a work around that others were using (more info here). The work around is to wrap the binding in a timeout like below:

$timeout(function() {
    angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
},1000, false);

The above will try to do the binding a second later after the modal controller code executes. You can increase the delay if necessary.