Question

我是Angular.js的新手，我正试图通过FineUploader库对文件进行AJAX发布。我试图用a directive I found on github修改some other code，但我似乎无法将返回的值恢复回模型。

我的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回调。但是调试输出

file: {{analysis | json}}

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

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

Answer 1

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

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

我无法在没有小提琴的情况下尝试这一点，但它应该有用。

Answer 2

在你的回调中试试这个：

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

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

由于FineUploader在“Angular”之外调用回调，你需要调用$ apply来告诉Angular有些事情发生了变化。

在Angular.js中从FineUploader回调更新ngModel

2 个答案: