javascript - Angular js 将 'file' 类型更改为 'text' 类型 [Safari]

Question

我有从数组中的对象构建的输入。

一切都正确，但是当input.type = 'file'时，Angular将其更改为文本类型，我无法弄清楚。

有什么人注意到这一点吗？

我的模板:

<span ng-repeat="input in formInputs">
    <label for="{{input.id}}">{{input.label}}</label>
    <input type="{{input.type}}" id="{{input.id}}" name="{{input.name}}" ng-model="input.insert" ng-required="input.must">
</span>

我的阵列:

var formInputs = [
    {
        label     : 'first name',
        id        : 'id1',
        type      : 'text',
        name      : 'name1',
        must      : true,
        insert    : ''
    },
    {
        label     : 'upload file',
        id        : 'id2',
        type      : 'file',
        name      : 'name2',
        must      : true,
        insert    : ''
    }
]

我的结果:

<span ng-repeat="input in formInputs">
  <label for="id1">first name</label>
  <input type="text" id="id1" name="name1" ng-model="input.insert" ng-required="input.must">
  <label for="id2">upload file</label>
  <input type="text" id="id2" name="name2" ng-model="input.insert" ng-required="input.must">
</span>

编辑:

我有这个流动:

<input type="{{childInput.type}}" id="{{childInput.id}}" name="{{childInput.name}}">

这个数组:

var formInputs = [
    {
        id        : 'id',
        type      : 'file',
        name      : 'name',
    }
]

坚决[仅在 Safari 中]:

<input type="text" id="id" name="name">

为什么会发生这种情况？

感谢您的帮助!

Answer 1

来自AngularJS Documentation for input :

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

所以看起来 Angular 回落到 type="text" 。有很多答案可以解决这个问题，请查看:

• ng-model for <input type=“file”/>

根据该答案，这是一种处理文件输入的方法。

.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]);
            });
        }
    }
}]);

正如 Hackerman 所提到的，他的jsfiddle乍一看似乎可以工作(与 Angular 1.0.1 一起使用)，但它似乎无法正确填充模型。