ng-model non funziona con l'input di file

Question

Sto cercando di ottenere il valore di input del file e di visualizzarlo da qualche altra parte, al di fuori dell'input. Sto usando AngularJS v1.4.8 nell'app.

<input type="file" ng-model="fileName" /> 
<div>{{fileName}}</div> 

Questo approccio funziona bene con type = "text" ma non con type = "file".

Perché è così e come posso risolvere questo problema?

Grazie!

Answer 1

Dato che il mio compito era piuttosto semplice, ho deciso di andare in un altro modo:

html:

<input type="file" file-input="files" /> 
<ul> 
    <li ng-repeat="file in files">{{file.name}}</li> 
</ul> 

js:

.directive('fileInput', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      element.bind('change', function() { 
       $parse(attributes.fileInput) 
       .assign(scope,element[0].files) 
       scope.$apply() 
      }); 
     } 
    }; 
}]); 

Questo è in realtà una soluzione da this tutorial. Si noti che questo può funzionare anche con più file.

Tuttavia non c'è niente di male con l'alternativa di Serghinho, c'è solo un modo più semplice, penso.