Ng-“<inputtype=”file“/>的模型(带有指令演示)

Question

Ng-“<inputtype=”file“/>的模型(带有指令演示)我尝试在输入标记上使用ng模型，并输入文件：<input type="file" ng-model="vm.uploadme" />但是在选择了一个文件之后，在控制器中，$scope e.vm.upadme仍然是未定义的。如何在控制器中获取选定的文件？

Answer 1

我用指令创建了一个解决方案：

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }}]);

输入标签变成：

<input type="file" fileread="vm.uploadme" />

或者，如果只需要文件定义：

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            });
        }
    }}]);

Answer 2

这是@Endy-Tjahjono解决方案的增编。

最后我无法得到上传从范围上。即使上传在该指令明显更新的HTML中，我仍然无法通过$作用域访问它的值。不过，我能够从范围中设置它的值。神秘，对吧.？

结果表明，该指令创建了一个子作用域，并且该子作用域有它自己的。上传.

的解决方案是使用对象而不是原语来保存上传.

在控制器中，我有：

$scope.uploadme = {};$scope.uploadme.src = "";

在HTML中：

 <input type="file" fileread="uploadme.src"/>
 <input type="text" ng-model="uploadme.src"/>

指令没有任何更改。

现在，一切都和预期的一样。我可以抓住upadme.src在我的控制器上使用$作用域。