Question

我正在使用ngImgCrop angular指令来调整图像大小和裁剪图像。但是，当我尝试在UI模式控制器中使用它时，它不起作用。

我认为问题是由于未创建DOM，因此未正确设置以下行。 handlefileselect函数永远不会被调用？！

有人知道如何在Modal中正确使用此指令或如何使其工作？

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

模态控制器代码在这里

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

Answer 1

你的怀疑是现实。我有一个类似的问题，问题在于这一行：

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

这里的问题是您正在尝试绑定DOM元素上的事件，该元素在您进行绑定时可能不存在。我找到了其他人正在使用的工作（更多信息here）。解决方法是将绑定包装在如下所示的超时中：

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

上面将尝试在模态控制器代码执行后一秒钟进行绑定。如有必要，您可以增加延迟。

ngImgCrop在UI模式中不起作用

1 个答案: