0

私はmean-stackアプリケーションを持っています。ユーザーがサムネイル画像をアップロードできるボタンを実装したいと思います。私はthis linkに従っています。アップロードボタンをスキップ

はしかし、私はuploadボタンをスキップする:ユーザーがuploadボタンをクリックしなくても、Choose fileボタンをクリックしてローカルファイルを選択し、その後、私は、ファイルが自動的にをアップロードすることにしたいです。 existing codeinputを制御するディレクティブを使用して、私はそれを修正する方法がわからない:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
</head> 
<body ng-app="app" ng-controller="Ctrl"> 
    <input type="file" file-model="myFile" /> 
    <button ng-click="uploadFile()">Upload</button> 
    <script> 
    var app = angular.module('app', []); 
    app.controller('Ctrl', ['$scope', function($scope) { 
     $scope.uploadFile = function() { 
     // $scope.myFile is available here 
     alert("uploadFile"); 
     } 
    }]); 

    angular.module('app').directive('fileModel', ['$parse', function($parse) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
      }); 
     } 
     }; 
    }]); 
    </script> 
</body> 
</html> 

誰もがコードを変更し、これを達成する方法を知っていますか?偶然

答えて

0

、私はちょうど1行scope.uploadFile()を追加実現トリックを行います。

<script> 
    var app = angular.module('app', []); 
    app.controller('Ctrl', ['$scope', function($scope) { 
     $scope.uploadFile = function() { 
     // $scope.myFile is available here 
     alert("uploadFile"); 
     } 
    }]); 

    angular.module('app').directive('fileModel', ['$parse', function($parse) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
      scope.uploadFile() // works 
      }); 
     } 
     }; 
    }]); 
    </script> 
関連する問題