javascript - 如何在Angularjs中显示输入的文件名？

Question

我有以下对象:

 "file": "https://www.example.com/file.zip",

我是这样设置的:

$scope.building.file

并显示如下:

<input class="form-control" type="file" ng-model="building.file">

ng-model="{{building.file}} 但这部分不起作用。如何在该输入文件标记中显示文件的名称？

Answer 1

你可以创建一个指令来处理这些东西。

(function() {
 'use strict';

 angular
   .module('testApp')
   .directive('testFileUpload', testFileUpload);

 function testFileUpload(){
   return {
     scope: true,        //create a new scope and prototypically inherits from parent scope
     link: function (scope, el, attrs) {
       el.bind('change', function (event) {
         var files = event.target.files;
         //iterate files since 'multiple' may be specified on the element
         for (var i = 0;i<files.length;i++) {
           //emit event upward
           scope.$emit("fileSelected", { file: files[i] });
         }
       });
     }
   };
 }
})();