0

我是Angular.js的新手，我正在尝试通过FineUploader库对文件进行 AJAX 发布。我试图用其他代码修改我在 github 上找到的指令，但我似乎无法将返回值返回给模型。

我的 HTML 代码类似于

  <div ng-controller="Analysis"> 
    <div ng-model="analysis" fine-uploader upload-destination="upload" upload-extensions="model"></div>
  </div>

使用简单的控制器

function Analysis($scope){
    $scope.analysis = [];
}

然而，诀窍是指令

angular.module('cliniccio.directives', []).
  directive('fineUploader', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function($scope, element, attributes, ngModel) {
      var uploader = new qq.FineUploader({
        element: element[0],
        request: {
          endpoint: attributes.uploadDestination,
        },
        validation: {
          allowedExtensions: attributes.uploadExtensions.split(',')
        },
        text: {
            uploadButton: '<i class="icon-upload icon-white"></i> Upload File'
        },
        template: '<div class="qq-uploader">' +
                    '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' +
                    '<div class="qq-upload-button btn btn-info" style="width:auto;">{uploadButtonText}</div>' +
                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span></span>' +
                    '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                  '</div>',
        classes: {
          success: 'alert alert-success',
          fail: 'alert alert-error'
        },
        callbacks: {
          onComplete: function(id, fileName, responseJSON) {
            console.log(ngModel);
            ngModel.$modelValue.push(responseJSON);
          }
        }
      });
    }
  }});

注意应该推送模型值的 onComplete 回调。但是调试输出

文件：{{分析 | json}}

仍然是空的。请注意，我已经验证服务器确实发回了预期的 json。似乎 ngModel 的名称未定义。

我尝试了各种组合，但我得出的结论是这可能不是正确的方法。

4

2 回答 2

3

我会在你的回调中试试这个：

onComplete: function(id, fileName, responseJSON) {
   //duplicate the previous view value.
   var copy = angular.copy(ngModel.$viewValue);

   //add the new objects
   copy.push(responseJSON);

   //update the model and run form validation.
   ngModel.$setViewValue(copy);

   //queue a digest.
   scope.$apply();
}

我没有办法在没有小提琴的情况下尝试这个，但它应该可以工作。

于 2013-01-24T21:57:11.727 回答
0

在你的回调中试试这个：

onComplete: function(...) {
    scope.analysis = responseJSON;
    scope.$apply();
}

由于您的指令没有创建隔离范围，scope因此链接函数中的变量应该可以访问控制器可以访问的所有 $scope 属性。

由于 FineUploader 在“Angular 之外”调用回调，因此您需要调用 $apply 来告诉 Angular 发生了一些变化。

于 2013-01-24T21:42:46.667 回答