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

我做了一个小指令来侦听文件输入的更改。查看JSFiddleview.html：<input&nbsp;type="file"&nbsp;custom-on-change="uploadFile">js：app.controller('myCtrl',&nbsp;function($scope){ &nbsp;&nbsp;&nbsp;&nbsp;$scope.uploadFile&nbsp;=&nbsp;function(event){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;files&nbsp;=&nbsp;event.target.files; &nbsp;&nbsp;&nbsp;&nbsp;};});js：app.directive('customOnChange',&nbsp;function()&nbsp;{ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'A', &nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function&nbsp;(scope,&nbsp;element,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;onChangeHandler&nbsp;=&nbsp;scope.$eval(attrs.customOnChange); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.on('change',&nbsp;onChangeHandler); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.on('$destroy',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.off(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;};});

Answer 2

这是对其他一些模型的改进，数据将以ng模型结束，这通常是您想要的。标记(只需创建一个属性数据文件，以便指令能够找到它)<input &nbsp;&nbsp;&nbsp;&nbsp;data-file &nbsp;&nbsp;&nbsp;&nbsp;id="id_image"&nbsp;name="image" &nbsp;&nbsp;&nbsp;&nbsp;ng-model="my_image_model"&nbsp;type="file">JSapp.directive('file',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;require:"ngModel", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'A', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function($scope,&nbsp;el,&nbsp;attrs,&nbsp;ngModel){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.bind('change',&nbsp;function(event){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;files&nbsp;=&nbsp;event.target.files; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;file&nbsp;=&nbsp;files[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ngModel.$setViewValue(file); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.$apply(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;};});