输入类型文件无法在angularjs中获取文件类型的文件名

Question

我正在创建一个网络应用程序，其中有一个输入字段

<input type="file" ng-model="getfilename" />

还有一个按钮

<button ng-click="clickfordetails()">Click Here!</button>

和一个段落标签<P>{{file}}</p> 当用户从输入字段输入文件后单击按钮时，他应该在{{file}}中获得文件名

这是我的控制器

$scope.clickfordetails=function() {
    $scope.file=$scope.getfilename;
}

但是当我将控制器编辑为此时，我无法获取文件名

$scope.clickfordetails=function() {
    console.log($scope.getfilename);
}

我的控制台（谷歌浏览器）中的值是Undefined

我需要怎么做？？

Answer 1

使用下面的指令

directive('customFileInput', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                scope.filename=files[0].name
            });
        }
    }
}]);