1

ブートストラップ ファイル アップローダーのようなものを純粋な角度で実装しようとしています。このブートストラップ拡張機能は、デフォルトのファイル アップロード ウィジェットを一貫した代替手段に置き換えます (この jsfiddle を参照)。

同じディレクティブの別の要素で選択したファイル名を表示できません。すでに次のことを試しました：

  • scope.fileName = ファイル[0].name
  • ngModel
  • scope.$apply.

イベントが発生し、値が変更されますが、変更はインターフェイスに反映されません。

angular.module('app', [])
.directive('uploader', function() {
    return {
        restrict: 'E',
        template: '<div>filename: {{ fileName }}</div><input type="file">',
        scope: {},
        link: function(scope, el, attrs) {
            var file = el.find('input');
            scope.fileName = '?';
            file.bind('change', function(ev) {
                var files = event.target.files;
                scope.fileName = files[0].name;
                scope.$apply(function() {
                    scope.fileName = files[0].filename;
                });
                console.log(files, ev);
            });
        }    
    };
});

[アップデート]

その作業は今 -files[0].filenameする必要がありますfiles[0].name。

4

1 に答える 1