Datei in der Steuerung sagt undefined

Question

Ich habe Probleme beim Hochladen einer Datei. Ich habe einen Dienst erstellt:

angular 
.module('app') 
.service('fileUpload', ['$http', function ($http) { 
this.uploadFileToUrl = function(file, uploadUrl){ 
    var fd = new FormData(); 
    fd.append('file', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
    }) 
    .success(function(){ 
    }) 
    .error(function(){ 
    }); 
}}]); 

dann habe ich eine Richtlinie:

.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
};}]); 

Und in der Steuerung:

$scope.uploadFile = function(){ 
    var file = $scope.myFile; 
    console.log('file is '); 
    console.dir(file); 
    var uploadUrl = "/fileUpload"; 
    fileUpload.uploadFileToUrl(file, uploadUrl); 
}; 

HTML:

Browse <input type="file" file-model="myFile"/> 
<button ng-click="uploadFile()">upload me</button> 

Wie Sie können siehe ich verwende console.log in der Steuerung und was ich habe ist

Datei

undefiniert ist

Vielen Dank im Voraus!

Answer 1

Änderung

.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
scope: { 
     percent: "=fileModel" 

    }, 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 
scope.$watch('percent', function(value) { 
console.log(value) 
}); 

     element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
};}]); 

Kontrolle der Konsole Wert innerhalb der Prozentsatz Uhr, wenn Sie Datei