0

I am using this uploadcare widget in my angularjs app although when I use an angular model as the value for an attribute in the app, the uploadCare widget isn't effected.

Everything works except for the "derp" value, which I suspect is changed after the "uploadcare-widget" is made.

<div id="container" ng-controller='ContainerCtrl' ng-init="derp='1:1'">
    <input
    class="field-input"
    uploadcare-widget
    data-public-key="******"
    ng-model="sigInput.imageUrl"
    data-tabs="file url"
    data-images-only="true"
    data-preview-step="true"
    data-clearable="true"
    data-multiple="false"
    data-crop="{{derp}}"
    data-image-shrink="4x4"
    on-upload-complete="onUCUploadComplete(info)"
    on-widget-ready="onUCWidgetReady(widget)"
    value="{{sigInput.imageUrl}}"
   />

   data-crop value: <input ng-model="derp"></input>
P0lska
  • 461
  • 1
  • 6
  • 17
  • Did you check if data-crop value changes in DOM? I think that when widget instance is created, any changes to input properties do not affect it. You may want to recreate widget. – Dmitry Mukhin Jun 02 '15 at 11:27
  • Data-crop values do change in the DOM. How do I recreate the widget on model change though? – P0lska Jun 03 '15 at 02:41
  • not sure how to do that in Angular, [this snippet](http://jsbin.com/vetibu/1/watch?html,js,output) shows how to recreate widget in plain JS – Dmitry Mukhin Jun 03 '15 at 13:17

1 Answers1

0

The reason for it is that Uploadcare widget is created once, and it doesn't update itself, if input attrs change in the future.

You can try to recreate it when you want to change cropping (or other) config: http://jsbin.com/vetibu/1/watch?html,js,output

Dmitry Mukhin
  • 6,649
  • 3
  • 29
  • 31