如何使用 fileModel || 触发 ng-change输入类型="file"

Question

如何在 `'

发生变化时触发 ng-change

我为此使用自定义文件指令

指令：

app.directive('ngFileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function() {
                var values = [];
                angular.forEach(element[0].files, function(item) {
                    var value = {
                        // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);
                });
                scope.$apply(function() {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

如何在不使用 ng-model 的情况下使用 ng-change

HTML:

 <input type="file" name="" ng-file-model="uploadThisImage" ng-change="onFileSelect($index)">

Answer 1

使用 `ng-model`

获取文件输入的指令

此指令使 <input type=file> 能够自动与 ng-change 和 ng-form 指令一起工作。

AngularJS 内置 <input> 指令不处理 <input type=file>。为此需要一个自定义指令。

<input type="file" files-input ng-model="fileArray"
       ng-change="onFileSelect()" multiple />

files-input 指令：

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

上述指令添加了一个更改侦听器，它使用 input 元素的文件属性更新模型。

DEMO on PLNKR

`files-input` 指令的内联演示

angular.module("app",[]);

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileArray" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileArray">
      {{file.name}}
    </div>
  </body>

如何使用 fileModel || 触发 ng-change输入类型="file"

How to fire ng-change with fileModel || input type="file"

javascript

angularjs

angularjs-directive

angularjs-ng-change

使用 `ng-model`

`files-input` 指令的内联演示

如何使用 fileModel || 触发 ng-change输入类型="file"

How to fire ng-change with fileModel || input type="file"

javascript

angularjs

angularjs-directive

angularjs-ng-change

使用 ng-model

files-input 指令的内联演示

使用 `ng-model`

`files-input` 指令的内联演示