angular 在弹出dialog上再点击按钮弹出dialog并对file文件监听ng-change事件

angular监听dom为file的input标签的ng-change事件有些问题，

我的老大用的$element.find("id").bind('change',function(){})，但对我这里不适用，我的弹出框不能拿到$element

从stackoverflow上找到了解决办法，原链接https://stackoverflow.com/questions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields在446的位置（回答的人很多，在网页打开滚动条的前半部分），

 

解决办法是：对input的type为file的标签监听ng-change时，重新包装一个custom-ng-change属性标签来使用，

这需要写一个directive，这个要和你的app.controller同级，不能放到你的app.controller里，不然不起作用

directive.js:（也可以放到controller.js里，单要放到app.controller外面）

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});    

 这样就能监听了，注意uploadFile后面没有"()",controller里的function有个event参数这样就能监听了

 我的监听结果：