角材料模态和ng文件上传

Question

我正在使用角材料，ng-file-upload和ng-imgcrop-extended图像上传。我以前在普通页面上使用了所有这些，并且一切正常，但需求发生了变化，我必须将此逻辑移至模态。

它的工作方式是我使用ng-imgcrop裁剪照片，ng-file-upload做上传。所以现在，我有一个元素监听文件select，并处理裁剪。然而，现在它并没有听取文件选择，我只能从模态中推断出来。

这里是我的代码

模式呈现

$scope.headshotModal = function(ev) { 
    var useFullScreen; 
    useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen; 
    $mdDialog.show({ 
    locals: { 
     p: $scope.persona 
    }, 
    controller: 'ImagesController', 
    templateUrl: 'application/views/images/image_modal.html', 
    parent: angular.element(document.body), 
    targetEvent: ev, 
    clickOutsideToClose: true, 
    fullscreen: useFullScreen 
    }).then((function(answer) { 
    $scope.status = 'You said the information was "' + answer + '".'; 
    }), function() { 
    $scope.status = 'You cancelled the dialog.'; 
    }); 
    $scope.$watch((function() { 
    return $mdMedia('xs') || $mdMedia('sm'); 
    }), function(wantsFullScreen) { 
    $scope.customFullscreen = wantsFullScreen === true; 
    }); 
}; 

images_controller

angular.module('App').controller('ImagesController', [ 
    '$scope', 'p', '$mdDialog', 'ImageService', '$routeParams', function($scope, p, $mdDialog, ImageService, $routeParams) { 
    var handleFileSelect; 
    $scope.persona = p; 
    $scope.uploadedImg = false; 
    $scope.myCroppedImage = ''; 
    $scope.myImage = ''; 
    $scope.blockingObject = { 
     block: true 
    }; 
    $scope.callTestFuntion = function() { 
     $scope.blockingObject.render(function(dataURL) { 
     $scope.showRender = true; 
     console.log('via render'); 
     console.log(dataURL.length); 
     }); 
    }; 
    $scope.blockingObject.callback = function(dataURL) { 
     console.log('via function'); 
     console.log(dataURL.length); 
    }; 
    handleFileSelect = function(evt) { 
     var file, reader; 
     file = evt.currentTarget.files[0]; 
     console.log(file); 
     $scope.uploadedImg = true; 
     reader = new FileReader; 
     reader.onload = function(evt) { 
     $scope.$apply(function($scope) { 
      $scope.myImage = evt.target.result; 
     }); 
     }; 
     reader.readAsDataURL(file); 
    }; 
    angular.element(document.querySelector('#imgInput')).on('change', function() { 
     console.log('handlefileselect'); 
     // this function runs the code needed. it is not being triggered 
     handleFileSelect; 
    }); 
    $scope.thenRedirect = function() { 
     return window.location.href = "personas/" + $scope.persona.slug; 
    }; 
    $scope.testCrop = function(file) { 
     ImageService.uploadCroppedImg(file, 'headshot', $routeParams, $scope.cropAttributes); 
     return $scope.thenRedirect(); 
    }; 
    $scope.cancel = function() { 
     $scope.uploadedImg = false; 
     return $scope.showRender = false; 
    }; 
    $scope.hide = function() { 
     $mdDialog.hide(); 
    }; 
    return $scope.cancelOut = function() { 
     $mdDialog.cancel(); 
    }; 
    } 
]); 

modal.slim

md-dialog.fs [style="width: 100%; margin-left:25%; margin-right: 25%;" aria-label=("Image Edit") ng-cloak=""] 
    /form 
    md-toolbar.text-center 
    .md-toolbar-tools 
     h2 Image Edit 
     span flex="" 
     md-button.md-icon-button [ng-click="cancelOut()" aria-label="Cancel"] 
     i.fa.fa-times 
    md-dialog-content 
    .md-dialog-content 
     h2.text-center Edit Your Headshot 

     div.input-div 
     | Select an image file: 
     input#imgInput [type="file" ngf-select accept="image/*" ng-model="headshotFile"]/
    /[ng-show='uploadedImg'] 
     div 
     md-button.render-btn[ng-click="callTestFuntion()"] Render 
     .crop-area 
      img-crop cropject='cropAttributes' area-type="rectangle" image="myImage" live-view="blockingObject" result-image="myCroppedImage" 

     a.img-upload [href="#" ngf-select="uploadBanner($file)" ngf-dimensions="$width > 149 && $height > 149"] 
     i.fa.fa-camera 
     span Banner 

     a.img-upload[style='cursor: pointer;'ng-click="testCrop(headshotFile)"] 
     i.fa.fa-upload 
     span Upload 

     a.cancel-img.img-upload [href="#" ng-click="cancel()"] 
     i.fa.fa-ban 
     span Cancel 

此代码在正常的html页面上工作。但是问题似乎是它不能听到ImagesController的angular.element(document.querySelector('#imgInput')).on('change')部分。有谁知道如何使用模态，我可以处理这些类型的事件？我已经看到，我可能不得不在$mdDialog.show().resolve()函数中包装一些逻辑，但我不确定它期望的是什么。

任何帮助，将不胜感激:)

Answer 1

根据您的结果，我会通过接近了布线在onShowing or onComplete event事件的对话框这个问题。我想创建一个回调函数在这里：

$mdDialog.show({ 
    locals: { 
     p: $scope.persona 
    }, 
    controller: 'ImagesController', 
    templateUrl: 'application/views/images/image_modal.html', 
    parent: angular.element(document.body), 
    targetEvent: ev, 
    clickOutsideToClose: true, 
    fullscreen: useFullScreen, 
    onComplete: wireUpChangeEvent, 
    onRemoving: removeChangeEvent // so it doesn't get wired up multiple times 
    }) 

我不是100％，但我认为该对话框停留在DOM隐藏（关闭）之后。如果是这种情况，您需要使用onRemoving事件功能或检查以查看它是否已连线以防止多次发射。该功能将从启动对话框的控制器调用。您可能需要通过使用scope选项并将其告知preserveScope来使它们中的两个共享相同的范围。我也不确定模板是否会在第一次调用onShowing时加载到DOM上，因此使用onComplete可能更安全。