更新ngModel回调从FineUploader在Angular.js [英] Update ngModel on callback from FineUploader in Angular.js

问题描述

我是新来的 Angular.js ，我试图通过做文件的AJAX职位 FineUploader 库。我试图修改指令我在GitHub上与发现其他一些code 但我不能似乎能获得返回值回模型。

I'm new to Angular.js and I'm trying to do an AJAX post of a file through the FineUploader library. I've tried to modify a directive I found on github with some other code but I can't seem to be able to get the returned value back to the model.

我的HTML code是沿

My HTML code is something along the lines of

  <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回调应推模型值。
然而，调试输出

Notice the onComplete callback which should push the model value. However the debug output

file: {{analysis | json}}

保持为空。请注意，我已验证服务器的确发送预期的JSON回来。似乎ngModel的名称是不确定的。

Remains empty. Note that I have verified that the server does indeed sent the expected json back. It seems that the name of the ngModel is undefined.

我已经试过各种组合，但我是来得出结论，这可能不是正确的方法。

I've tried various combinations, but I've come to conclude that this might not be the proper way.

推荐答案

我想尝试这在回调：

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

我也没办法试试这个没有小提琴，但它应该工作。

I have no way to try this without a fiddle, but it should work.

这篇关于更新ngModel回调从FineUploader在Angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！