在显示模板指令输入[type = file]名 [英] Show the input[type=file] filename at directive template

问题描述

我想实现的东西像引导文件的上传在纯角。这引导扩展替换为一个一致的替代默认的文件上传小部件（看到这样的jsfiddle ）。

I'm trying to implement something like the bootstrap-file-uploader in pure angular. This bootstrap extension replaces the default file-upload widget with a consistent alternative (see this jsfiddle).

我无法显示在从同一指令另一元件所选择的文件名。尝试了以下已

I'm unable to show the selected filename in another element from the same directive. Tried the following already:

• scope.fileName =文件[0]。名称


• ngModel


• 范围。$适用。

该事件被触发值被改变，但变化不会反映在界面上。

The event is fired and value is changed, but the change is not reflected in the interface.

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

[更新]

其现在的工作 - 文件[0] .filename 应文件[0]。名称

Its working now - files[0].filename should be files[0].name.

推荐答案

答案是有，只是没有在范围实施。$适用。

The answer was there, just not implemented in scope.$apply.

修正：

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

这篇关于在显示模板指令输入[type = file]名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！