裁剪在引导模式中不起作用

Question

我正在使用 ngimgcrop 裁剪图像，它可以正常工作，但我尝试在 uibmodal 中显示图像，但它不起作用。 我尝试了一些解决方案（使用 ng-init ..），但没有一个对我有用。 在控制台中，图像是空的。

这是我的控制器：

 var app = angular.module('app', ['ngImgCrop', 'ui.bootstrap']);

    app.controller('Ctrl',  ['$scope',
        '$rootScope',
        '$uibModal',
        '$log',
        function($scope,
                 $rootScope,
                 $uibModal,
                 $log) 
        {



            $scope.animationsEnabled = true;
            $scope.open = function (size) {
                // alert('open mthod is called');
                $scope.test = 5;
                var modalInstance = $uibModal.open({
                    animation: true,
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: "imageModal.html",
                    controller: 'Ctrl',
                    controllerAs: '$ctrl',
                    size: size

                });

                modalInstance.result.then(function (selectedItem) {
                    $log.info('selected value:'+selectedItem);
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            };

            $scope.size='small';
            $scope.type='circle';
            $scope.imageDataURI='';
            $scope.resImageDataURI='';
            $scope.resImgFormat='image/png';
            $scope.resImgQuality=1;
            $scope.selMinSize=100;
            $scope.resImgSize=200;
            $scope.test=225;
            //$scope.aspectRatio=1.2;
            $scope.onChange=function($dataURI) {
                console.log('onChange fired');
            };
            $scope.onLoadBegin=function() {
                console.log('onLoadBegin fired');
            };
            $scope.onLoadDone=function() {
                console.log('onLoadDone fired');
            };
            $scope.onLoadError=function() {
                console.log('onLoadError fired');
            };

        $scope.uploadFile = function(file) {
            if (file) {
                // ng-img-crop
                var imageReader = new FileReader();
                imageReader.onload = function(image) {
                    $scope.$apply(function($scope) {
                        $scope.imageDataURI= image.target.result;
                    });
                };
                imageReader.readAsDataURL(file);
                 $scope.open();
            }
        };

            console.log(' my image', $scope.imageDataURI);

            $scope.$watch('resImageDataURI',function(){
            console.log('Res image', $scope.resImageDataURI);
                    });
            }]);

imagemodal.html：

<div ng-if="enableCrop=true" class="cropArea"   ng-class="{'big':size=='big', 'medium':size=='medium', 'small':size=='small'}">

<img-crop image="imageDataURI"
          result-image="$parent.resImageDataURI"

          change-on-fly="changeOnFly"
          area-type="{{type}}"
          area-min-size="selMinSize"
          result-image-format="{{resImgFormat}}"
          result-image-quality="resImgQuality"
          result-image-size="resImgSize"
          on-change="onChange($dataURI)"
          on-load-begin="onLoadBegin()"
          on-load-done="onLoadDone()"
          on-load-error="onLoadError()"
></img-crop>
<!--aspect-ratio="aspectRatio"-->

演示： demo

Answer 1

如果您想显示从控制器到模态的裁剪图像，请在此参数中使用 resolve 输入 img-crop 的变量 result-image。就像：

var modalInstance = $uibModal.open({
                animation: true,
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: "imageModal.html",
                controller: 'Ctrl',
                controllerAs: '$ctrl',
                size: size,
                resolve:{
                    croppedImg:$scope.imageCrop
                }

            });

当你的 imageCrop 看起来像

<img-crop image="imageDataURI"
      result-image="imageCrop"

在模态控制器中注入croppedImg 作为普通的提供者/服务/工厂就像：

function Ctrl($scope, croppedImg, ..another, ..etc)

通过这种方式，在控制器中，您可以在模态控制器中获得裁剪的图像。那么只有

$scope.newImg = croppedImg

并在模态中显示为<img src="{{newImg}}">

希望你能理解。