0

我正在使用角度材料、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;
  });
};

图像控制器

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();
    };
  }
]);

模态的.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()函数中包含一些逻辑，但我不确定它在期待什么。

任何帮助，将不胜感激 ：）

4

1 回答 1

0

根据您的结果，我将通过在对话框的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 事件函数，要么检查它是否已经连接起来以防止多次触发。该函数将从启动对话框的控制器中调用。您可能需要通过使用范围选项并告诉它保留范围来使它们两者共享相同的范围。我也不确定是否会在第一次调用 onShowing 时加载模板并在 DOM 上，因此使用 onComplete 可能更安全。

于 2016-07-07T21:13:23.220 回答