0

我有一个页面来跟踪我所在的台球联赛。目前，我对 HTML 进行硬编码并链接到作为项目一部分的文件，以获取我从联赛中获得的每周统计数据 PDF 以及来自上周。我能够让拖放文件上传工作，但我想让组件尽可能可重用。

为此，我创建了一个指令“dropFile”，您将其设置为上传文件的 URL。这个想法是文件上传例程将调用另一个属性中指定的函数，'on-file-uploaded' 并将它传递给它file，这是原始删除的文件对象，为 responseText、完成标志和错误标志添加了属性。文件上传会将文件存储在数据库中，并返回带有 ID、MD5 哈希值和其他属性的 JSON。of pool将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>

这样，我必须在我的控制器上创建两个方法，gotStatsand gotScores，这将被调用并更新statsHashand 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此外，由于我有一个孤立的范围，当分数上传完成后，我似乎无法隐藏下拉框......

（小提琴）

我喜欢指令的概念，因为您可以将它放在一个元素上以接受拖放文件上传，然后您可以在元素内使用 HTML 对其进行样式设置并显示上传进度，但有更好的方法吗？

4

0 回答 0