с помощью директивы в angularjs для получения путь_к_файла

Question

Я создаю веб-приложение в angularjs, но я не очень хорошо знаком с директивами angularjs

я хочу, чтобы получить путь к файлу выбранного файла конкретного пользователя

<script> 
var myApp = angular.module('myApp', []); 
myApp.controller('myCtrl', function($scope, $http, $q){ 
    $scope.uploadFile=function(){ 
    var f = document.getElementById('file').files[0]; 
    console.log(f); 
    console.log(files); 
    } 
}); 

myApp.directive('customFileInput', [function() { 
     return { 
      restrict: "EA", 
      scope: false, 
      link: function (scope, element, attrs) { 
       element.on('change', function (evt) { 
        var files = evt.target.files; 
        scope.filename = files[0].name 
       }); 
      } 
     } 
    }]); 
</script> 

это мой сценарий, в котором я использовал angularjs приложение, контроллер и директивы

, но я не в состоянии вызвать директиву на кнопку мыши

<div ng-app="myApp" ng-controller="myCtrl"> 
    ggggg 
<input id="file" type="file" ng-model="mdfile" ng-change="filepath()" class="form-control" custom-directive custom-file-input /> 
    <button ng-click="uploadFile()">upload me</button> 
</div> 

это моя кнопка и поле ввода с файлом загрузить

, когда я нажимаю на кнопку, я получаю следующее сообщение об ошибке

ReferenceError: files is not defined 
    at b.$scope.uploadFile (image.html:22) 
    at fn (eval at compile (angular.js:14539), <anonymous>:4:221) 
    at b (angular.js:15628) 
    at e (angular.js:25172) 
    at b.$eval (angular.js:17378) 
    at b.$apply (angular.js:17478) 
    at HTMLButtonElement.<anonymous> (angular.js:25177) 
    at Rf (angular.js:3487) 
    at HTMLButtonElement.d (angular.js:3475) 

, что мне нужно делать, если я хочу, чтобы получить путь к файлу и использовать эту директиву?

Answer 1

Смотреть это Plunkr:

https://embed.plnkr.co/dmNRL8bj7E5ZtnArQ0sm/

Я изменил вашу директиву, чтобы сделать его предупредить об изменении URL

app.directive('customFileInput', [function() { 
    return { 
     restrict: "EA", 
     scope: false, 
     link: function ($scope, element, attrs) { 
      element.on('change', function (evt) { 
       var files = evt.target.files; 
       var filename = files[0].name; 
       alert(URL.createObjectURL(files[0])); 
       }); 
     } 
    }