我是角的新手。我试图从HTML“文件”字段读取上传的文件路径,每当“更改”发生在这个字段上。如果我使用“onChange”,它可以工作,但当我以angular的方式使用“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>

fileNameChaged()从不调用。Firebug也不会显示任何错误。


当前回答

这是对其他一些模型的改进,数据将以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();
            });
        }
    };
});

其他回答

使用ng-change1的“files-input”指令的工作演示

要使<input type=file>元素使用ng-change指令,它需要一个使用ng-model指令的自定义指令。

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

演示

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); }) } } }) .controller("ctrl", function($scope) { $scope.onInputChange = function() { console.log("input change"); }; }) <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" files-input ng-model="fileList" ng-change="onInputChange()" multiple /> <h2>Files</h2> <div ng-repeat="file in fileList"> {{file.name}} </div> </body>

类似于这里的其他一些很好的答案,我写了一个指令来解决这个问题,但是这个实现更紧密地反映了附加事件的角度方式。

你可以像这样使用指令:

HTML

<input type="file" file-change="yourHandler($event, files)" />

如您所见,您可以将所选择的文件注入到事件处理程序中,就像您将$event对象注入到任何ng事件处理程序中一样。

Javascript

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        // Get the function provided in the file-change attribute.
        // Note the attribute has become an angular expression,
        // which is what we are parsing. The provided handler is 
        // wrapped up in an outer function (attrHandler) - we'll 
        // call the provided event handler inside the handler()
        // function below.
        var attrHandler = $parse(attrs['fileChange']);

        // This is a wrapper handler which will be attached to the
        // HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            // Execute the provided handler in the directive's scope.
            // The files variable will be available for consumption
            // by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        // Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

这是对其他一些模型的改进,数据将以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();
            });
        }
    };
});

最简单的Angular jqLite版本。

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

监听文件输入更改的另一种有趣方法是监视输入文件的ng-model属性。当然,FileModel是一个自定义指令。

是这样的:

> -> <input type="file" file-model="change.fnEvidence

JS代码->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

希望它能帮助到一些人。