Директива загрузки файла Angularjs

Question

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

angular.module("app") 
    .directive("myFileUpload", [function() { 
     return { 
      restrict: "E", 
      template: '<input type="file" multiple class="form-control" placeholder="Select file">', 
      scope: { 
       files: "=" 
      }, 
      link: function (scope, element) { 

       element.change(function (event) { 
        scope.files = event.target.files; 
        event.preventDefault(); 
       }); 

      } 
     } 
    }]); 

Я могу использовать эту директиву где-нибудь в своем приложении.

<div class="col-sm-9"> 
    <input ng-model="myform.title"> 
    <my-file-upload files="myform.files"></my-file-upload> 
</div> 

И я хочу перечислить, что выбранные файлы следующим образом:

<div class="col-sm-9"> 
    <input ng-model="myform.title"> 
    <my-file-upload files="myform.files"></my-file-upload> 
    <p ng-repeat="item in myform.files">{{item.filename}}</p> 
</div> 

Если я не вводить текст в вводе myform.title, файлы не перечислят.

Answer 1

обратный вызов из

element.change 

происходит за пределами "углового-мир". Вы должны позволить угловым знать, что «что-то произошло» попробовать это вместо

element.change(function (event) { 
       scope.files = event.target.files; 
       event.preventDefault(); 
       scope.$apply(); 
      });