Question

我想使用Angular材质创建一个md对话框，它显示了用于图像选择的选择文件选项。选择图像后，它应显示图像并提供裁剪功能，并提供裁剪图像的预览。对于裁剪，我使用的是ng-img-crop

以下是触发md-dialog的链接：

<span class="edit_image" ng-click="uploadPic()">

下面是我的控制器功能，由上面的函数调用：

$scope.uploadPic = function(ev){
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;
         $mdDialog.show({
            controller: imageUploadCtrl,
            templateUrl: 'uploadImage.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: useFullScreen
        });

以下是我正在使用的html模板：

<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
    <img-crop image="myImage" result-image="myCroppedImage"></img-crop>

</div>
    <div>Cropped Image:</div>
    <div><img ng-src="{{myCroppedImage}}" /></div>
<md-dialog-actions layout="row">
    <md-button ng-click="cancel()">
        Cancel
    </md-button>
    <span flex></span>
    <md-button type="submit" class="md-raised md-primary" ng-click="saveImage()">
        Upload
    </md-button>
</md-dialog-actions>

图片上传控制器：

function imageUploadCtrl($scope, $mdDialog){

        $scope.myImage='';
        $scope.myCroppedImage='';

        var handleFileSelect=function(ev) {
            console.log('trigger');
            var file=ev.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (ev) {
                $scope.$apply(function($scope){
                $scope.myImage=ev.target.result;
                });
            };
            reader.readAsDataURL(file);
        };
        angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

        $scope.hide = function () {
            $mdDialog.hide();
        };
        $scope.cancel = function () {
            $mdDialog.cancel();
        };
        $scope.saveImage = function () {
            Notifier.success("Image Uploaded Sucessfully");
            $mdDialog.hide();
        };
    }

如果我在新页面中执行此过程，则上面的代码非常有用。但是没有在md-dialog框中工作。任何人都可以帮我完成它。

Answer 1

我遇到了同样的问题。您没有指定您遇到的确切问题，但我认为您在使用md对话框的演示代码中使用的文件输入更改侦听器遇到了同样的问题（我不知道为什么它没有＆＃39;仍然工作。

解决方法是使用下面显示的文件上传更改指令，可在此处找到：https://stackoverflow.com/a/41557378/1000610

angular.module("YOUR_APP_NAME").directive("ngUploadChange",function(){
return{
    scope:{
        ngUploadChange:"&"
    },
    link:function($scope, $element, $attrs){
        $element.on("change",function(event){
            $scope.$apply(function(){
                $scope.ngUploadChange({$event: event})
            })
        })
        $scope.$on("$destroy",function(){
            $element.off();
        });
    }
}});

将文件输入html更改为：

<input type="file" id="fileInput" ng-upload-change="handleFileSelect($event)"/></div>

然后将handleFileSelect函数更改为范围var

$scope.handleFileSelect = function(evt) {...

删除这个旧的更改侦听器行：

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

还因为某些原因注意到ng-change和onchange也没有用。

创建一个用于图像上传的md对话框，其中包含图像视图，裁剪并在angularjs中上传

1 个答案: