Angular js 将“文件”类型更改为“文本”类型 [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：

注意：并非所有提供的功能都适用于所有输入类型。具体来说，input[file] 不支持通过ng-model 进行的数据绑定和事件处理。

所以看起来 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），但它似乎无法正确填充模型。