后期导入在自定义指令控制器中使用的范围（Angularjs）

Question

我有一个customOnChange指令，

 myApp.directive('customOnChange', function() {
   return {
     scope: true,
     link: function(scope, element, attrs) {
       var onChangeFunc = scope.$eval(attrs.customOnChange);
       element.bind('change', onChangeFunc);
     },
     transclude: true
   };
 })

我的控制器正在使用此指令功能

myApp.controller（'ControllerCtrl'，function（$ scope）{

  $scope.displayAttachments = false;
  $scope.attachFile = false;
  $scope.files = [];
  $scope.filesName = [];


  $scope.uploadFile = function() {
    $scope.displayAttachments = true;
    var filename = event.target.files[0].name;
    var file = event.target.files[0];
    $scope.files.push(file);
    $scope.filesName.push(file.name);
    console.log(file);
    console.log(file.name);
  };


  $scope.add = function() {
    $scope.attachFile = true;
  };

}

我在html中使用这个，

<div class="panel-body" ng-show="displayAttachments">
  <ul class="list-group">

    <li class="list-group-item" ng-repeat="name in filesName">{{name}}</li>

  </ul>
</div>
<input type="file" id="file" custom-on-change="uploadFile" ng-show="attachFile" />
<button type="button" ng-model="attach" ng-click="add()">Attach</button>

运行后，

• 我点击附件，选择文件出现
• 选择文件后，调用uploadFile并且$ scope.displayAttachments变为true但仍然没有在浏览器上显示attachemnts
• 我点击附件，然后只有文件名出现在上面选择文件

我不知道为什么会这样。请exaplain并告诉我如何解决这个问题。