AngularJs：如何检查文件输入字段中的更改？

Question

AngularJs：如何检查文件输入字段中的更改？我对角不熟悉。我试图从HTML‘file’字段读取上传的文件路径，每当该字段发生“更改”时。如果我使用“onChange”，它会起作用，但当我用角度方式使用“ng-Change”时，它就不起作用了。<script>    var DemoModule = angular.module("Demo",[]);    DemoModule .controller("form-cntlr",function($scope){    $scope.selectFile = function()    {         $("#file").click();    }    $scope.fileNameChaged = function()    {         alert("select file");    }});</script><div ng-controller="form-cntlr">     <form>          <button ng-click="selectFile()">Upload Your File</button>          <input type="file" style="display:none"                            id="file" name='file' ng-Change="fileNameChaged()"/>     </form>  </div>fileNameChage()从来不打电话。Firebug也不会显示任何错误。

Answer 1

我做了一个小指令来侦听文件输入的更改。

查看JSFiddle

view.html：

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

js：

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

js：

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();
      });

    }
  };});

Answer 2

这是对其他一些模型的改进，数据将以ng模型结束，这通常是您想要的。

标记(只需创建一个属性数据文件，以便指令能够找到它)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

JS

app.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };});