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

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')しかし、問題は、の部分を聞くことができないよう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 イベント関数を使用するか、複数の発火を防ぐために既に接続されているかどうかを確認する必要があります。この関数は、ダイアログを起動するコントローラーから呼び出されます。scope オプションを使用して、preserveScope を指定することで、それらの 2 つが同じスコープを共有するようにする必要がある場合があります。また、最初に onShowing が呼び出されたときにテンプレートが読み込まれ、DOM に読み込まれるかどうかもわかりません。そのため、おそらく onComplete を使用する方が安全です。

于 2016-07-07T21:13:23.220 に答える