在指令模板中显示输入[type=file]文件名

Question

我正试图在纯angular中实现像bootstrap-file-uploader这样的东西。这个引导扩展将默认的文件上传小部件替换为一致的替代品(参见此jsfiddle)。

我无法在同一指令的另一个元素中显示选定的文件名。已尝试以下操作:

• 范围。fileName = files[0].name
• ngModel
• 范围。美元。

事件被触发，值被改变，但是改变不会反映在接口中。

angular.module('app', [])
.directive('uploader', function() {
    return {
        restrict: 'E',
        template: '<div>filename: {{ fileName }}</div><input type="file">',
        scope: {},
        link: function(scope, el, attrs) {
            var file = el.find('input');
            scope.fileName = '?';
            file.bind('change', function(ev) {
                var files = event.target.files;
                scope.fileName = files[0].name;
                scope.$apply(function() {
                    scope.fileName = files[0].filename;
                });
                console.log(files, ev);
            });
        }    
    };
});

(更新)

它现在工作了- files[0].filename应该是files[0].name。

Answer 1

答案就在那里，只是没有在scope.$apply中实现。

纠正:

scope.$apply(function() {
    scope.fileName = files[0].name;