Angularjs 未加载ui裁剪器图像

我在我的角度项目中使用指令

我想从图像列表中裁剪选定的图像，但由于某些原因，选定的图像不会出现在指定区域中，但是该选定图像的裁剪部分确实会出现，但我无法编辑裁剪区域

下面是一个JSFIDLE，显示了这个问题：

HTML:

CSS:

---

关于如何在此指令中为

imageToCrop

参数显示我的图像，您有什么想法吗？

您应该更改css

<div class="croparea">
    <ui-cropper image="imageToCrop" result-image="myCroppedImage" area-type="rectangle"></ui-cropper>
  </div>

致：

这会有所不同

试着看看你正在工作的JSFIDLE

祝你好运

angular.module('app', ['uiCropper'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    $scope.images = [
      {id:1, url: "https://unsplash.it/200/300/?random=1"},
      {id:2, url: "https://unsplash.it/200/300/?random=2"},
      {id:3, url: "https://unsplash.it/200/300/?random=3"},
      {id:4, url: "https://unsplash.it/200/300/?random=4"}
    ]
    $scope.gallery_image={};
    $scope.gallery_image.selected = {};

    $scope.selectImageToCrop = function(){
        $scope.imageToCrop = $scope.gallery_image.selected.url;
    };
    $scope.clearSelect = function(){
        $scope.imageToCrop = '';
    };
    $scope.cropIt = function(){
        $scope.imageToCrop = $scope.myCroppedImage;
    };

  });
angular.bootstrap(document, ['app', 'uiCropper']);

.croparea {
  background: #E4E4E4;
  overflow: hidden;
  min-width:350px;
  min-height:350px;
}
.image-container{
  display: flex;
  .image {
    width: 200px;
    height: 300px;
  }
}

<div class="croparea">
    <ui-cropper image="imageToCrop" result-image="myCroppedImage" area-type="rectangle"></ui-cropper>
  </div>

min-height:350px;

height:350px;