Pass rendered data- attributes to angular

Question

I need to pass a data-attribute to an angular controller function. (I'm sure there's a better name, but the context is below):

Dropzone.js has a "preview template". For every file you upload in the dropzone, it renders the HTML you specify here.

Here's a part of this HTML which is of interest:

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

I would like to do something like:

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

Does anyone know the proper syntax for this?

Artur Boruński · Accepted Answer · 2015-10-02 09:43:08Z

1

I found complex angular directive for Dropzone here

You can catch file after upload a then set proper class name in Your scope

$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
  }
}};

answered Oct 2, 2015 at 9:43

Artur Boruński

5351 gold badge3 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

I've thought about this. Scope is shared across multiple file uploads, though. So I would still have a problem when trying to find the appropriate file/index in the preview template.

David Over a year ago

Actually, solved it this way. Note that for everyone looking to do the same thing, you'll probably be needing to use $compile to create a scope per file upload. stackoverflow.com/questions/32905136/…

Michele Ricciardi · Accepted Answer · 2015-10-02 09:43:22Z

0

What you need is the ng-class directive.
Depending on what your function returns this may work:

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

answered Oct 2, 2015 at 9:43

Michele Ricciardi

2,11716 silver badges17 bronze badges

2 Comments

Michele Ricciardi Over a year ago

Could you provide a JSFiddle / Plnkr link with the code? what is dz-name meant to represent?

David Over a year ago

dropzonejs.com, upload a file, right click on filename and view source

Collectives™ on Stack Overflow

Pass rendered data- attributes to angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related