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

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