Question

我有一个fileUpload指令，显示当前选择的文件名：

app.directive('fileUpload', function () {
return {
    scope: true,
    link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;
            for (var i = 0;i<files.length;i++) {
                scope.$emit("fileSelected", { file: files[i] });
            }
        });
    }
};

}）;

这是html：

<input id="pdDocument" type="file" file-upload>

我在表单上有一个取消按钮：

$scope.files = [];

文件对象被清除，但文件名仍显示在“选择文件”按钮旁边的页面上。如何清除文件名，以便在清除$ scope.files时不显示？我觉得我需要触发文件输入指令的更改事件，但不知道如何做到这一点。

Answer 1

在链接功能中，您可以添加以下watcher，以便在模型files更改时将文件名设置为空：

scope.$watch('files', function(){
    el.val('');
})

的 Working Demo

使用angularjs，如何为文件上载指令触发更改事件？

1 个答案: