アプリケーションでAngular1を使用しています。ユーザーがファイルを特定の領域(div)にドラッグしたときに関数をトリガする必要があります。私はondragenterを試しましたが、この場合コントローラに定義された関数にアクセスすることはできません。タフ、ondragenterの警告機能が働きます。 onDragEnterのAngular1に代わるものはありますか?あるいは、同じものに対して新しいディレクティブを作成するにはどうすればよいですか?onDragEnterイベントがAngularで動作しない
0
A
答えて
1
私が作業しているプロジェクトでは、ファイル入力にドラッグアンドドロップする例があります。たぶんあなたを助けることができます。この場合、Excelワークシートをアプリケーションのui-gridにインポートしています。しかし、あなたはすべての指示を呼び出すことができます。 HTMLで
、これは私の入力です:
<label class="btn btn-default btn-file">
Upload file
<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" />
</label>
これは、(ディレクティブの残りはちょうど私のアプリケーションの輸入・ロジックで)入力した後に呼ばれるディレクティブの最初の半分である:
.directive("fileread", [function() {
return {
scope: {
opts: '='
},
link: function($scope, $elm, $attrs) {
$elm.on('change', function(changeEvent) {
var reader = new FileReader();
//var evt = evt;
reader.onload = function(evt) {
$scope.$apply(function() {
var myEvent = ((window.event)?(event):(evt));
//get the Element which this event is all about
var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
var data = Element.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
指示コード自体は重要ではありませんが、入力の属性としてのfilereadを参照しています。ワーキング例えば
、このPlunkerを(それは私の指示の簡易版だが、それは私が使用するベースです)を参照してください。
http://embed.plnkr.co/rYC3nd7undqJz2mr8Old/
はそれがお役に立てば幸いです。
関連する問題
- 1. Angularがajaxレスポンスで動作しない
- 2. リバースプロキシがAngular Appで動作しない
- 3. $ scopeがAngular jsで動作しない
- 4. ngClickイベントがAngular 1.5.5コンポーネントで起動しない
- 5. Angular - Foundation Equalizerが動作しない
- 6. Angular JSサービスが動作しない
- 7. Meteor-Angular 1.5サービスが動作しない
- 8. Angular CLI CSSが動作しない
- 9. Angular JS ng-showが動作しない
- 10. Angular JS HTTPポストが動作しない
- 11. Angular cli lazy loadingが動作しない
- 12. コンポーネントが動作しないAngular UI-Router
- 13. webpack + angular 1.Xが動作しない
- 14. Angular 2.1.0 transition()が動作しない
- 15. Angular JS ng-initが動作しない
- 16. onDragEnterカスタムイベントを作成する
- 17. onmouseoverイベントがfirefoxで動作しない
- 18. ゴールトラッキングがイベントで動作しない
- 19. Jquery:onunloadイベントでJqueryが動作しない
- 20. ObservableイベントがAngular2で動作しない
- 21. angular-cli Firebase hosting Angular 2ルータが動作しない
- 22. 単純なJS/JSONがAngularで動作しない
- 23. styleUrlsがAngular 2.4で動作していない
- 24. jQuery tipsy clickイベントが動作しない
- 25. ComboBoxModelイベントが動作しない
- 26. jQueryの.tapイベントが動作しない
- 27. Plotly Button Clickイベントが動作しない
- 28. 操作イベントが起動しない
- 29. winforms keydownイベントが動作しない
- 30. WPF app.xaml exitイベントが動作しない