无法让文件上传在 angular UI 模态 window 中工作

Question

这是我正在尝试做的事情的一个简单示例： http://plnkr.co/edit/dlktEzrBeFshGaZsTmg7?p=preview 基本上我只想在模式 window 中使用 jquery 文件上传。正如您在 plunker 中看到的那样，正在调用 none 的回调。

$('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $log.log("done accessed");
    },
    fail: function (e, data) {
      $log.log("fail accessed");
    },
    progressall: function (e, data) {
        $log.log("progressall");
    },
    //add: function(e,data){
    //$log.log("add accessed");
    //},
    submit: function (e, data) {
        var notetext = $("#descModal").val();
        data.formData = { Description: notetext };
        $log.log("submit accessed");
    }

即使我添加文件时 'add' 回调也没有被调用。如果我使用 angular 表带，这一切都很好，但出于其他原因我不想使用它。我调查了模态初始化，并试图覆盖 windowTemplateURL

var theModal = $modal.open({ scope: $scope, templateUrl: modURL, controller: 'detailController', size: 'lg' });

（默认值在这里：https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html），看起来问题是 'modal-transclude' 属性。关于克服这个问题有什么想法吗？

Answer 1

将 jQuery-ui 升级到 1.9.0 或更高版本。

永远不要在你的控制器中使用 jQuery 选择器，写一个指令。例如

angular.module("myapp").directive("fileUpload", function($log, $parse) {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      var options = $parse(attrs.fileUpload)(scope) || {};

      element.fileupload({
        dataType: "json",
        url: "your url",
        done: function(e, data) {
          $log.log("done accessed");
        },
        fail: function(e, data) {
          $log.log("fail accessed");
        },
        progress: function(e, data) {
          options.progress = parseInt(data.loaded / data.total * 100, 10);
          scope.$apply();
          $log.log("progress");
        },
        submit: function(e, data) {
          $log.log("notetext:", options.notetext);
          data.formData = {
            Description: options.notetext
          };
          $log.log("submit accessed");
        }
      });
    }
  }

并这样使用：

<input file-upload="fileUploadOptions" type="file" multiple data-sequential-uploads="true" />

这是一个更新的插件：http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview

顺便说一句，有一个使用 angularjs 上传文件的示例：https://blueimp.github.io/jQuery-File-Upload/angularjs.html .

无法让文件上传在 angular UI 模态 window 中工作

Can't get file upload to work in angular UI modal window

angularjs

angular-ui

jquery-file-upload

angular-ui-bootstrap