угловой материал modal и ng-file-upload

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') часть ImagesController. кто-нибудь знает, как с помощью модального я могу обрабатывать эти типы событий? Я видел, что мне, возможно, придется обернуть некоторую логику в функции $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 и указывая ему на сохранениеScope. Я также не уверен, будет ли шаблон загружен и в DOM при первом вызове onShowing, поэтому, вероятно, безопаснее использовать onComplete.