作物在引導程序模式下不起作用

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" 

模態CONTROLER

注入croppedImg正常提供商/服務/工廠只是想：

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

這樣

，在控制器你在你的模態控制器中得到了裁剪後的圖像。那麼只有

$scope.newImg = croppedImg 

和模態顯示爲<img src="{{newImg}}">

希望你能理解。