Search code examples
fine-uploader

Support angular binding inside fineuploader template

I'm starting with fineuploader and I'm currently have an issue while integrating this awesome library in my angular application.

I have some angular expressions in my template:

<div id="simple-previews-template" style="display: none">
  ...
  <div class="qq-upload-button-selector qq-upload-button small postfix">
    {{ 'ACTION.BROWSE' | translate }}
  </div>
  ...
  {{ Upload.warn }}
</div>

But these expressions aren't replaced at all: my browser displays {{ 'ACTION.BROWSE' | translate }} and {{ Upload.warn }} instead of their values.

I firstly thought it was due to <script type="text/template" id="..."></script> tag, so I changed to <div id="..." style="display: none"></div> without effect.

How can I have angular binding working with fineuploader?

I'm also interested in knowing why it doesn't work ;)

Solution

  • Without seeing more of your code, it's hard to say exactly how to solve your issue. Most likely, you'll need to $compile the template against the proper $scope after it has been added to the DOM by Fine Uploader.

    Also, I'm not exactly sure why you are including the template in a hidden <div>. It really should be a <script> with a type="text/template". See our Angular example at https://github.com/FineUploader/integration-examples/tree/master/src/angularjs-nodejs.