0

私は自分が参加しているプール リーグを追跡するページを持っています。現在、私は HTML をハードコーディングし、リーグから取得した週間統計 PDF と、先週。ドラッグ アンド ドロップのファイル アップロードを機能させることができましたが、コンポーネントをできるだけ再利用できるようにしたいと考えています。

そのために、ファイルのアップロード先の URL に設定するディレクティブ 'dropFile' を作成しました。ファイル アップロード ルーチンは、別の属性 'on-file-uploaded' で指定された関数を呼び出し、それに を渡しますfile。これは、responseText、完了フラグ、およびエラー フラグの属性が追加された元のドロップされたファイル オブジェクトです。ファイルのアップロードでは、ファイルがデータベースに保存され、ID、MD5 ハッシュ、およびその他のプロパティを含む JSON が返されます。プールのweekは、これらのファイルのハッシュを保存し、データベースからファイルを返す MVC アクションへのリンクを表示します。HTMLの外観をどのように想像するかを次に示します。

<div drop-file="/fileupload"
    on-file-uploaded="gotStats"
    ng-hide="week.statsHash">
    DROP STATS
</div>
<div ng-show="week.statsHash">
    <a href="/files/{{week.statsHash}}">Stats</a>
</div>

<div drop-file="/fileupload" 
    on-file-uploaded="gotScores"
    ng-hide="week.scoresHash">
    DROP SCORES
</div>
<div ng-show="week.scoresHash">
    <a href="/files/{{week.scoresHash}}">Scores</a>
</div>

このようにして、コントローラーに 2 つのメソッドを作成する必要があります。 and が呼び出され、 gotStatsandgotScoresが更新されます。ここでは簡単にするために、エラー チェックは省略されています。statsHashscoresHash

$scope.gotStats = function(file) {
    var response = JSON.parse(file.responseText);
    $scope.week.statsHash = response.hash;
};

$scope.gotScores = function(file) {
    var response = JSON.parse(file.responseText);
    $scope.week.scoresHash = response.hash;
};

これは私が望むものを達成するための最良の方法ですか? ディレクティブからイベントを発行することfileUploadedで、ファイルやその他の引数を渡し、ディレクティブのスコープにアクセスできるようになりますよね? の関数名を指定するだけで少し面倒に思えますon-file-uploadedが、もっと良い方法はありますか? これを分離スコープの一部として使用します。

scope: {
    allowMultiple: "=",
    uploadCompleteMethod: "&onFileUploaded"
},

そして、次のように呼び出します。

var func = scope.uploadCompleteMethod();
if (func)
    func(file);

また、私は孤立したスコープを持っているのでng-hide、スコアのアップロードが完了したときにドロップボックスを非表示にするために使用できないようです...

(フィドル)

ディレクティブの概念が気に入っているのは、要素にスローしてドラッグ アンド ドロップ ファイルのアップロードを受け入れ、要素内で HTML を使用してスタイルを設定し、アップロードの進行状況を表示できるからですが、もっと良い方法はありますか?

4

0 に答える 0