1

我有指令“notes”，它基本上是一个便笺小部件，我可以在任何页面上添加它，只需为其添加名称和 id，以允许人们向该项目添加便笺。

用户现在也应该能够使用ng-file-upload将文件上传到他们的笔记，但我很难让$scope.filesng-file-upload 指令填充。我很确定它像往常一样与范围一样愚蠢，但我无法弄清楚。

那么知道为什么在我选择文件时没有填充 $scope.files 吗？

Plunker 链接

指示：

angular.module('app').directive('notes', [function () {
    return {
        restrict: 'E',
        templateUrl: 'notes.html',
        scope: {
            itemId: '@',
            itemModel: '@'
        },
        controller: ['$scope', 'Upload', function($scope, Upload) {
            $scope.files = [];
            $scope.notes = [
              {title: 'first title'},
              {title: 'second title'}
            ];

            $scope.$watch('files', function (files) {
                console.log(files);
                $scope.formUpload = false;
                if (files != null) {
                    for (var i = 0; i < files.length; i++) {
                        $scope.errorMsg = null;
                        (function (file) {
                            uploadUsingUpload(file);
                        })(files[i]);
                    }
                }
            });

            function uploadUsingUpload(file) {
                file.upload = Upload.upload({
                    url: '/api/v1/notes/upload_attachment',
                    method: 'POST',
                    //headers: {
                    //  'my-header': 'my-header-value'
                    //},
                    //fields: {username: $scope.username},
                    file: file,
                    fileFormDataName: 'file'
                });

                file.upload.then(function (response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                });

                file.upload.progress(function (evt) {
                    // Math.min is to fix IE which reports 200% sometimes
                    file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
                });

                file.upload.xhr(function (xhr) {
                    // xhr.upload.addEventListener('abort', function(){console.log('abort complete')}, false);
                });
            }

        }]
    };
}]);

模板：

<ul>
  <li ng-repeat="note in notes">
    {{note.title}}
    <div ngf-select ng-model="files"><b>upload</b></div>
  </li>
</ul>
<pre style="border: 1px solid red;">{{files | json}}</pre>
4

3 回答 3

2

我在这里有点晚了，但是您在更新 $scope.files 属性时遇到问题的原因是因为在您的 ng-repeat 中创建了一个新范围。

<ul>
    <li ng-repeat="note in notes">
        {{note.title}}
        <div ngf-select ng-model="$parent.files"><b>upload</b></div>
    </li>
</ul>
<pre style="border: 1px solid red;">{{files | json}}</pre>

有关范围如何在 Angular 中工作的更多信息，请查看https://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2016-04-17T04:08:38.753 回答
1

ng-file-upload 在封闭范围内设置“文件”模型（或绑定到 ng-model 的属性）中的选定文件对象。在这种情况下，封闭范围是 ng-repeat。如果您在笔记对象中设置属性“文件”并将其设置为 ng-model 它应该可以工作。

http://plnkr.co/edit/oVpgrSWQAcFdV26aVKv7?p=preview

<ul>
  <li ng-repeat="note in notes" >
    {{note.title}}
    <div ngf-select ng-model="note.files"><b>upload</b></div>
  </li>
</ul>

  // In directive
  $scope.notes = [{
    title: 'first title',
    files: []
  }, {
    title: 'second title',
    files: []
  }];

 //And you can watch the file model
  $scope.$watch(function($scope) {
    return $scope.notes.
    map(function(note) {
      return note.files;
    });
  }, function(files) {
      console.log('Files' + files);
  }, true)
于 2015-07-09T12:42:15.207 回答
0

我用 ngf-select 添加了动态 id，这对我来说很好。

<ul>
 <li ng-repeat="note in notes">
   {{note.title}}
   <div ngf-select id="file{{$index}}" ng-model="files"><b>upload</b></div>
  </li>
</ul>
于 2017-05-23T05:24:24.780 回答