Question

我正在尝试为<input>类型文件编写指令。该指令将处理文件更改事件，我试图将以下对象作为模型返回。

{ fileName: element[0].files[0].name, fileAsBuffer: e.target.result }

我的指令代码

"use strict";
(function() {
    angular
        .module("fileUploadApp")
        .directive("customFileChange", customFileChange);

    customFileChange.$inject = ["$parse"];

    function customFileChange($parse) {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                var model = $parse(attrs.customFileChange);
                var modelSetter = model.assign;
                element.bind("change", function() {
                    scope.$apply(function() {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var fileModel = {
                                fileName: element[0].files[0].name,
                                fileAsBuffer: e.target.result
                            };
                            modelSetter(scope, fileModel);
                        }
                        reader.onerror = function(e) {
                            console.log(e.target.error);
                        }
                        reader.readAsArrayBuffer(element[0].files[0]);
                    });
                });
            }
        };
    }
})();

我的HTML

<input type="file" name="name" data-custom-file-change="vm.newDocument.attachment" />
<p>{{vm.newDocument.attachment.fileName}}</p>

问题：

我第一次上传文件时，没有显示任何内容 <p>{{vm.newDocument.attachment.fileName}}</p>
如果我第二次上传另一个文件，它会显示第一个文件 <p>{{vm.newDocument.attachment.fileName}}</p>

JS Bin

Answer 1

您需要从回调函数本身内部触发摘要周期。

例如：

reader.onload = function (e) {

  var fileModel = { fileName: element[0].files[0].name, fileAsBuffer: e.target.result };

  scope.$apply(function () {
    modelSetter(scope, fileModel);
  });
};

演示： https://jsbin.com/nicocosige/1/edit?html,js,console,output

<input />文件未在AngularJs中正确更新/修改

1 个答案: