모서리 재질 모달 및 ng 파일 업로드

Question

각 재료, ng-file-upload 및 ng-imgcrop-extended을 사용하여 이미지 업로드 작업을하고 있습니다. 이전에 정상적인 페이지에서이 모든 것을 사용하고 있었지만 모든 것이 잘 작동했지만 요구 사항이 변경되어이 논리를 모달로 이동해야했습니다.

작동 방식은 사진을 자르기 위해 ng-imgcrop을 사용하고 있습니다. ng-file-upload은 업로드를 수행합니다. 그래서 지금, 나는 파일 선택을 듣는 요소를 가지고 있으며, 자르기를 처리합니다. 그러나 지금은 파일 선택을 듣지 않고 있습니다. 모달에서 나온 것일뿐입니다. 여기

는

모달 렌더링 내 코드입니다

$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 페이지에서 작동합니다. 그러나 문제는 의 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를 사용하는 것이 더 안전합니다.