angularjs - 在指令模板中显示 input[type=file] 文件名

Question

我正在尝试以纯角度实现类似bootstrap-file-uploader的东西。这个引导扩展用一致的替代品替换了默认的文件上传小部件（参见这个 jsfiddle）。

我无法在同一指令的另一个元素中显示选定的文件名。已经尝试了以下方法：

• scope.fileName = 文件[0].name
• 模型
• 范围.$申请。

触发事件并更改值，但更改不会反映在界面中。

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;