将渲染的数据属性传递给角度答案

【问题标题】：Pass rendered data- attributes to angular将渲染的数据属性传递给角度
【发布时间】：2015-12-30 11:51:12
【问题描述】：

我需要将数据属性传递给角度控制器函数。（我敢肯定有一个更好的名字，但上下文如下）：

Dropzone.js 有一个“预览模板”。对于您在 dropzone 中上传的每个文件，它都会呈现您在此处指定的 HTML。

下面是这个 HTML 中有趣的一部分：

    <div class="dz-size"><span data-dz-size></span></div>
    <div class="dz-filename"><span data-dz-name></span></div>

我想做这样的事情：

<div class="dz-filename"><span data-dz-name></span></div>
<i class="fa" class="{{getIconFromFilename(dz-name)}}" style="..."></i>

有人知道正确的语法吗？

【问题讨论】：

标签： javascript angularjs html dropzone.js

【解决方案1】：

我发现 Dropzone here 的复杂角度指令

您可以在上传后捕获文件，然后在您的范围内设置正确的类名

$scope.dropzoneConfig = {
'options': { // passed into the Dropzone constructor
  'url': 'upload.php'
},
'eventHandlers': {
  'sending': function (file, xhr, formData) {
  },
  'success': function (file, response) {
     // set scope icon class from file
  }
}};

【讨论】：

我已经考虑过了。但是，范围在多个文件上传之间共享。所以当我试图在预览模板中找到合适的文件/索引时，我仍然会遇到问题。
其实就是这样解决的。请注意，对于希望做同样事情的每个人，您可能需要使用$compile 为每个文件上传创建一个范围。 stackoverflow.com/questions/32905136/…

【解决方案2】：

您需要的是ng-class directive。
根据您的函数返回的内容，这可能会起作用：

<i class="fa" ng-class="[getIconFromFilename(dz-name)]"></i>

【讨论】：

您能否提供带有代码的 JSFiddle / Plnkr 链接？ dz-name 代表什么？
dropzonejs.com，上传文件，右键文件名查看源