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')的{{1}}部分。有谁知道如何使用模态，我可以处理这些类型的事件？我已经看到我可能必须在ImagesController函数中包含一些逻辑，但我不确定它的期望是什么。

任何帮助将不胜感激：）

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可能更安全。

角度材料模态和ng-file-upload

1 个答案: