AngularJS NG-文件上传不工作里面NG-重复 [英] AngularJS ng-file-upload not working inside ng-repeat
问题描述
我有指令笔记，这基本上是一个Notes窗口小部件，我可以添加任何页面上，只是添加一个名称和ID它让人们添加注释到该项目。
用户应该能够使用将文件上传到自己的笔记 NG-文件上传如现在，但我很难获得 $ scope.files 由NG-文件上传指令填充。我是pretty确保它像往常一样愚蠢的东西与范围，但我不明白。
那么，为什么$当我选择一个文件scope.files被不填充任何想法？
指令：
angular.module（应用）。指令（注释，[功能（）{
返回{
限制：'E'，
templateUrl：notes.html'，
范围： {
的itemId：'@'，
itemModel：'@'
}，
控制器：['$范围'，'上传'，函数（$范围，上传）{
$ scope.files = [];
$ scope.notes = [
{标题：第一个冠军}，
{标题：第二个冠军'}
]; $范围。$腕表（'文件'，函数（文件）{
的console.log（文件）;
$ scope.formUpload = FALSE;
如果（文件！= NULL）{
对于（VAR I = 0; I＆LT; files.length;我++）{
$ scope.errorMsg = NULL;
（函数（文件）{
uploadUsingUpload（文件）;
}）（文件[I]）;
}
}
}）; 功能uploadUsingUpload（文件）{
file.upload = Upload.upload（{
网址：'/ API / V1 /笔记/ upload_attachment'，
方法：POST，
//头：{
//'我的头：我的头值
//}，
//字段：{用户名：$ scope.username}，
文件：文件，
fileFormDataName：'文件'
}）; file.upload.then（功能（响应）{
$超时（函数（）{
file.result = response.data;
}）;
}，函数（响应）{
如果（response.status大于0）
$ scope.errorMsg = response.status +：+ response.data;
}）; file.upload.progress（功能（EVT）{
// Math.min是修复IE有时会报告200％
file.progress = Math.min（100，parseInt函数（100.0 * evt.loaded / evt.total））;
}）; file.upload.xhr（功能（XHR）{
// xhr.upload.addEventListener（'中止'，函数（）{的console.log（'中止完成'）}，FALSE）;
}）;
} }]
};
}]）;
模板：
＆LT; UL＆GT;
＆LT;李NG重复=音符笔记＆GT;
{{note.title}}
＆LT; DIV NGF选NG模型=文件＆GT;＆LT; B＆GT;上传和LT; / B＆GT;＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; pre风格=边界：1px的红色实;＆GT; {{文件| JSON}}＆LT; / pre＆GT;
我是有点晚了这里，但你为什么有更新$ scope.files财产问题的原因是因为被中创建一个新的作用域您的NG-重复。
＆LT; UL＆GT;
＆LT;李NG重复=音符笔记＆GT;
{{note.title}}
＆LT; DIV NGF选NG模型=$ parent.files＆GT;＆LT; B＆GT;上传和LT; / B＆GT;＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; pre风格=边界：1px的红色实;＆GT; {{文件| JSON}}＆LT; / pre＆GT;
有关作用域的角度退房如何工作的更多信息， https：//开头的github .COM /角/ angular.js /维基/了解，斯科普斯
I have directive "notes" which is basically a notes widget that I can add on any page and just add a name and id to it to allow people adding notes to that item.
The users should be able to upload files to their notes using ng-file-upload as well now but I struggle to get the $scope.files populated by the ng-file-upload directive. I'm pretty sure it is as usual something stupid with the scope but I can't figure it out.
So any idea why $scope.files gets not populated when I select a file?
Directive:
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);
});
}
}]
};
}]);
Template:
<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>
I'm kind of late here but the reason why you're having a problem updating the $scope.files property is because a new scope is being created within your 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>
For more information about how scoping works in angular check out https://github.com/angular/angular.js/wiki/Understanding-Scopes
这篇关于AngularJS NG-文件上传不工作里面NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
