1

ng-flowに依存するファイルアップロード（ファイルのbase64）を処理するディレクティブを書きたいのですが、ngModelを使用せずにディレクティブを機能させることができました（fをscope.fにバインドします：P）フォーム内でこのディレクティブを使用する方がよいでしょう (また、ng-change を使用する可能性は、機能があると非常に便利です)

angular.module('webappApp.common.directives',['flow','pascalprecht.translate', 'tmh.dynamicLocale']).
directive('ngBase64FileUpload',function(){
    return {
        restrict: 'A',
        templateUrl: 'common/partials/base64FileUpload.tpl.html',
        require: '^ngModel',
        scope:{
            blur:'&fieldBlur',
            focus:"&fieldFocus",
            filename:"="

        },
        link: function (scope, element, attrs, ctrl) {
            console.log(scope);
            scope.processFiles = function (files) {
                console.log(files);
                var flowFile=files[0];
                //angular.forEach(files, function (flowFile, i) {
                    var fileReader = new FileReader();
                    fileReader.onload = function (event) {
                        var f ={};
                        //var f=event.target.result;
                        f.uri=event.target.result;
                        f.size=flowFile.size;
                        f.filename=flowFile.name;
                        ctrl.$setViewValue(f);
                    };
                    fileReader.readAsDataURL(flowFile.file);
                //});
            }
        }
    }
});

テンプレートは

<div class="input-group col-xs-12" flow-init="{singleFile:true}" flow-files-added="processFiles($files)">
 <p class="input-pos-field form-control no-border nomargin" ng-if="!f"> {{filename|translate}}</p>
 <p class="input-pos-field form-control no-border nomargin" ng-if="f"> <a ng-href="{{f.uri}}" download>{{f.filename|translate}}</a></p>
<span class="input-group-btn">
    <button type="button" class="icon_file" flow-btn><img src="images/file_icon.png" width="30"/><input ng-blur="blur($event)" ng-focus="focus($event)" type="file" class="hide"></button>
</span>

そのディレクティブを機能させた後、テンプレートを少し変更するのも良い方法を理解していれば、ファイルのダウンロードのみを許可する「読み取り専用」オプションも追加する必要があります（ボタン画像）

柔軟で再利用可能なディレクティブを記述するために ngModel/parser/formatter/viewValue を正しく使用する方法を理解することについて、いくつかの問題を見つけています

---- 編集ディレクティブは現在機能しているようですが、テンプレート (ファイルがアップロードされていない場合はファイル名またはデフォルトを表示) を正しく処理するのに問題があります。次のステップは、ng-disabled の場合の動作を変更することです。渡されます（または読み取り専用ですが、最初の実行と2番目の実行はほぼ同じです）基本的に、ディレクティブはボタンで別のアイコンを使用する必要があります（ファイルのアップロードは許可せず、ダウンロードのみを許可します） plunker

4

1 に答える 1