javascript - 如何使用 ng-model 双向绑定(bind)到类型 ="file"输入？

Question

基本上我想这样做:

<input type="file" ng-model="variable_in_scope">

当我选择一个文件时，variable_in_scope 应该被分配给选择的文件对象。此外，如果 variable_in_scope 的值在我页面的其他任何地方发生更改，它应该更新“选择文件”按钮旁边的文本以指示所选文件已更改。

对于任何其他类型的输入，这都可以。

我不需要做任何花哨的事情，比如实际查看文件的内容。最终，我想发布它，但我发现你可以通过 setting the file object you get into a FormData object 做到这一点，实际上没有将内容读入 Javascript 领域。

我发现了其他关于使用 Angular 选择文件的问题，但没有一个有双向绑定(bind)解决方案。

Answer 1

My answer on another question 提供了一种使用ng-model 执行此操作的方法，但由于该问题不是专门关于双向绑定(bind)的(而且我的答案很难在那里找到)，我'将在此处重现:

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

Demo

要使用它，您只需将它添加到您的 Angular 模块，并在您要使用它的文件选择器上包含一个 bind-file 属性。