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

Question

I have a fileUpload directive that displays the currently selected filename:

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

});

Here is the html:

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

I have a cancel button on the form that does this:

$scope.files = [];

The files object gets cleared but the filename still displays on the page next to the Choose File button. How can I get the filename to clear out so it doesn't display when $scope.files is cleared? I feel like I need to trigger the change event for the file input directive but not sure how to do that.

Answer 1

Inside the link function, you can add the following watcher to set the file name to empty when the model files changes:

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

Working Demo