ngImgCrop不工作在用戶界面模式

Question

我正在使用ngImgCrop角度指令來調整和裁剪圖像。但是，當我嘗試在UI Modal控制器中使用它時，它不起作用。

我相信這個問題是由於沒有創建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); 

以上將嘗試做結合，模態控制器代碼後一秒鐘後執行。如有必要，您可以延長延遲時間。