不更新控制器型号角文件上传指令 [英] Angular File Upload directive not updating controller model
问题描述
我试图按照此 [教程] ,但可以'弄不明白的工作。
I am attempting to follow this [tutorial] but can't get it working.
我的角度控制器记录未定义
在我的指令创建的模型。
这里是href=\"http://jsfiddle.net/JeJenny/ZG9re/\" rel=\"nofollow\"> [的jsfiddle] 它工作创造了我的教程的作者一个
My Angular controller is logging undefined
for a model created in my directive.
Here is a [JSFiddle] of it working created my author of tutorial.
问题是认为可以找到 $ scope.myFile
键,但控制器不( $ scope.myFile
为未定义
)。
The problem is the view can find $scope.myFile
and but controller does not ($scope.myFile
is undefined
).
该视图显示 {{} myFile.name}
(如刚才的例子我-image.jpg的
)。在 MYFILE
变量是包含在选定的文件数据的JS对象。这工作得很好。该指令似乎被分配模型所选文件的值(因此鉴于正确显示的话)。
The view displays {{ myFile.name }}
(as just example my-image.jpg
). The myFile
variable is a JS object containing data on selected file. This works fine. The directive seems to be assigning the model the value of selected file (and thus displays it correctly in view).
<input file-model="myFile" type="file"/ >
<div class="label label-info">
{{ myFile.name }}
</div>
<button ng-click="uploadDocs()">Click</button>
下面是我从这个 [教程] 得到了指令。
Here is the directive I got from this [tutorial].
由于输入型文件
不能使用 NG-模型
,该指令树立典型,以关联与文件
输入,每次文件大火更改
事件分配给它。
Since input type file
can't use ng-model
, this directive sets up the model to be associated with an file
input, assigning to it every time the file fires change
event.
directive('fileModel', [
'$parse',
function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
if (element[0].files.length > 1) {
modelSetter(scope, element[0].files);
}
else {
modelSetter(scope, element[0].files[0]);
}
});
});
}
};
}
]).
在控制器我只要登录 $ scope.myFile
。这是从在上述的HTML按钮调用。
理想情况下,我会在这里的文件上传到服务器上,但我不能,因为 $ scope.myFile
是不确定的。
In the controller I just log $scope.myFile
. This is called from the button in the HTML above.
Ideally, I'd be uploading the files to server here, but I can't because $scope.myFile
is undefined.
$scope.uploadDocs = function() {
var file = $scope.myFile;
console.log($scope.myFile);
};
有人能告诉我为什么认为会recieving $ scope.myFile
但是控制器日志未定义
为 $ scope.myFile
?
推荐答案
我想从控制器访问指令的变量时,碰到了同样的问题。在我来说,我可以让 MYFILE
提供给控制器,但我不得不把它分配给范围。$父。$ parent.myFile
从指令中。为了访问变量我不想在祖先的深度硬code,所以我结束了使用一个服务共享指令和控制器之间的变量:
I ran into the same problem when trying to access a directive's variable from the controller. In my case I could make myFile
available to the controller, but I had to assign it to scope.$parent.$parent.myFile
from within the directive. I didn't want to hard code in a depth of ancestry in order to access the variable, so I ended up using a service to share the variable between directive and controller:
.factory('fileService', function() {
var files = [];
return files;
})
我的指令,code更改为使用该服务,而不是 attrs.fileModel
这是本教程中使用:
.directive('fileModel', ['$parse', 'fileService', function ($parse, fileService) {
return {
restrict: 'A',
link: function(scope, element) {
element.bind('change', function(){
scope.$apply(function(){
if (element[0].files != undefined) {
fileService.push(element[0].files[0]);
console.log('directive applying with file');
}
});
});
}
};
}])
然后,注入的FileService到控制器后,我可以直接从的FileService访问文件:
Then, after injecting fileService into the controller I could access the file directly from fileService:
$scope.uploadDocs = function() {
console.log(fileService);
};
这篇关于不更新控制器型号角文件上传指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!