AngularJS ng-file-upload не работает внутри ng-repeat

Question

У меня есть директивные «заметки», которые в основном представляют собой виджет заметок, который я могу добавить на любую страницу, и просто добавляю к нему имя и идентификатор, чтобы люди добавляли примечания к этому пункт.

Пользователи должны иметь возможность загружать файлы в свои заметки, используя ng-file-upload, а теперь, но я изо всех сил стараюсь получить $scope.files, заполненный директивой ng-file-upload. Я почти уверен, что это как-то глупо с масштабом, но я не могу понять это.

Значит, любая идея, почему $ scope.files не заполняется, когда я выбираю файл?

Plunker Link

Директива:

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> 

Answer 1

нг-файлов для загрузки устанавливает выбранные файлы объекта в модели "файлы" (или атрибут, привязанный к n g-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) 

Answer 2

Я вроде поздно здесь, но причина, почему у вас возникли проблемы при обновлении в $ scope.files свойство обусловлено тем, что новая область создается в пределах вашего нг-повтора.

<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> 

Для получения дополнительной информации о том, как обзорное работает в угловой проверить https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

я добавил динамический идентификатор с NGF-выбора и это прекрасно работает для меня.

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