☰

AngularJs: ファイル入力フィールドの変更を確認するにはどうすればいいですか? 質問する

tag-icon • tag-icon angularjs
AngularJs: ファイル入力フィールドの変更を確認するにはどうすればいいですか? 質問する

私は Angular 初心者です。このフィールドで「変更」が発生するたびに、HTML の「ファイル」フィールドからアップロードされたファイルのパスを読み取ろうとしています。「onChange」を使用すると機能しますが、「ng-change」を使用して Angular 方式で使用すると機能しません。

<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 でもエラーは表示されません。

ベストアンサー1

ファイル入力の変更をリッスンするための小さなディレクティブを作成しました。

JSFiddle を見る

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

    }
  };
});

おすすめ記事