Show the input[type=file] filename at directive template

问题

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 = files[0].name
• ngModel
• scope.$apply.

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

[UPDATE]

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

回答1:

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

Corrected:

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

来源：https://stackoverflow.com/questions/17213526/show-the-inputtype-file-filename-at-directive-template