问题描述
我有指令笔记,这基本上是一个Notes窗口小部件,我可以添加任何页面上,只是添加一个名称和ID它让人们添加注释到该项目。
用户应该能够使用将文件上传到自己的笔记
指令:
angular.module(应用)。指令(注释,[功能(){
返回{
限制:'E',
templateUrl:notes.html',
范围: {
的itemId:'@',
itemModel:'@'
},
控制器:['$范围','上传',函数($范围,上传){
$ scope.files = [];
$ scope.notes = [
{标题:第一个冠军},
{标题:第二个冠军'}
]; $范围。$腕表('文件',函数(文件){
的console.log(文件);
$ scope.formUpload = FALSE;
如果(文件!= NULL){
对于(VAR I = 0; I< 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);
});
} }]
};
}]);
模板:
< UL>
<李NG重复=音符笔记>
{{note.title}}
< DIV NGF选NG模型=文件>< B>上传和LT; / B>< / DIV>
< /李>
< / UL>
< pre风格=边界:1px的红色实;> {{文件| JSON}}< / pre>
我是有点晚了这里,但你为什么有更新$ scope.files财产问题的原因是因为被中创建一个新的作用域您的NG-重复。
< UL>
<李NG重复=音符笔记>
{{note.title}}
< DIV NGF选NG模型=$ parent.files>< B>上传和LT; / B>< / DIV>
< /李>
< / UL>
< pre风格=边界:1px的红色实;> {{文件| JSON}}< / pre>
有关作用域的角度退房如何工作的更多信息,
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-重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!