我有指令“注释”,它基本上是一个笔记小部件,我可以在任何页面上添加,只需添加一个名称和ID,以允许人们为该项目添加注释。
用户应该能够使用ng-file-upload将文件上传到他们的笔记中,但我很难通过ng-file-upload指令填充$scope.files
。我很确定它和照相机一样愚蠢,但我无法弄明白。
所以当我选择文件时,为什么$ scope.files没有填充?
指令:
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>
答案 0 :(得分: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>
有关角度检查https://github.com/angular/angular.js/wiki/Understanding-Scopes
中作用域的工作原理的更多信息答案 1 :(得分:1)
ng-file-upload在封闭范围内的“files”模型(或绑定到ng-model的属性)中设置所选文件对象。在这种情况下,封闭范围是ng-repeat。如果在note对象中设置属性“files”并将其设置为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)
答案 2 :(得分: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>