角度素材と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ページで動作します。しかし問題は、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を指定することで、2つのスコープを同じスコープで共有する必要があります。また、onShowingが初めて呼び出されたときにテンプレートがロードされるかどうか、またDOMにはわからないので、おそらくonCompleteを使用する方が安全でしょう。