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 に答える