Question

我有一个页面来跟踪我所在的联盟.Currenly我硬编码HTML并链接到文件，这些文件是我从联盟获得的每周统计数据的PDF项目的扫描副本上周的表格。我能够让拖放文件上传工作，但我想让组件尽可能重复使用。

为此，我创建了一个指令'dropFile'，您将其设置为发布文件上载的URL。我们的想法是文件上传例程将调用另一个属性“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>

这样我就必须在我的控制器gotStats和gotScores上创建两个方法，这两个方法将被调用，并将更新statsHash和scoresHash。为简单起见，省略了错误检查：

$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在分数上传完成后隐藏投递箱...

(fiddle)

我喜欢这个指令概念，因为你可以把它放在一个元素上来接受拖放文件上传，然后你可以在元素中使用HTML来设置它的样式并显示上传进度，但有没有更好的方法？

从AngularJS指令触发AJAX文件上传事件的最佳方法是什么？

0 个答案: