Question

以下是我正在尝试做的事情的一个有关的例子： http://plnkr.co/edit/dlktEzrBeFshGaZsTmg7?p=preview 基本上我只想在模态窗口中使用jquery文件上传。正如你在plunker中看到的那样，没有一个回调被调用。

$('#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'回调。如果我使用角带，这一切都可以正常工作，但我不想因为其他原因而使用它。我已经研究了模态初始化，并试图覆盖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选择器，编写指令。 E.g。

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" />

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

btw有一个使用angularjs使用此文件上传的示例：https://blueimp.github.io/jQuery-File-Upload/angularjs.html。

无法在角度UI模式窗口中上传文件

1 个答案: