角材料模态和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();
    };
  }
]);

模态

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或onComplete事件中连接事件来解决此问题。 我会在这里创建一个回调函数：

$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选项并告知它以saveScope来使它们两个共享相同的范围。 我也不确定是否会在第一次调用onShowing时在DOM上加载模板，因此使用onComplete可能更安全。