1

I have an app with Angular Signature directive.

This directive allow you draw a sign in a canvas, the content of this canvas is rendered in a <img> tag (base64)

<div class="container">
    <signature-pad
        accept="accept" clear="clear"
        height="220" width="568"
        dataurl="dataurl">
    </signature-pad>

    <div class="buttons">
        <button ng-click="signature = accept()">Generate</button>
    </div>

</div>

<div class="result" ng-show="signature">
    <img ng-src="{{signature.dataUrl}}" />
</div>

The image base64 is in {{signature.dataUrl}} , The image base64 it is generated very fine.

enter image description here

I want to pass value of ng-src to ng-model. I tried to do this.

<div class="result" ng-show="signature">
    My ng-model (in my controller)  : {{mySign}}
    <img ng-model="mySign" ng-src="{{signature.dataUrl}}" class="imagen-firma" />
</div>

In my controller I have initialized:

$scope.mySign = "";

But the value of ng-src (base64) not pass to my ng-model. How can I do that?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Elmer
  • 370
  • 1
  • 5
  • 21
  • `ng-model="signature.dataUrl"`? – Explosion Pills Jun 05 '18 at 14:40
  • But ng-model="signature.dataUrl" is not in my controller, ng-model="signature.dataUrl" is part of Directive – Elmer Jun 05 '18 at 14:43
  • 2
    if `signature.dataUrl` is populated dynamically, then do it within the function (I'm guessing) `accept()`. e.g. `$scope.mySign = $scope.signature.dataUrl` – Aleksey Solovey Jun 05 '18 at 14:43
  • But @AlekseySolovey, **$scope.signature.dataUrl** is not in my controller, **signature.dataUrl** came from directive, can you explain me how can do to signature.dataUrl work in my controller please. – Elmer Jun 05 '18 at 15:38
  • @ELM I'm not familiar with directive-to-controller communications, I think you need to bind controller's variable through directive's scope. Alternatively, you might want to use a service, just like in a controller-to-controller communication – Aleksey Solovey Jun 05 '18 at 15:46
  • @ELM Have you ever got answer to this issue? I am facing the same issue while using this directive. – Bubuhubu Apr 27 '22 at 16:35

1 Answers1

-1

img tag haven't support ng-model directive use ng-init directive for binding. 

<div class="result" ng-show="signature">
    My ng-model (in my controller)  : {{mySign}}
    <img ng-src="{{signature.dataUrl}}" ng-init="mySign = " class="imagen-firma" />
</div>
Hamik Hambardzumyan
  • 177
  • 1
  • 3
  • I believe `ng-init` fires when the controller is loaded, but `signature` is generated dynamically from a function, so it will always be undefined – Aleksey Solovey Jun 05 '18 at 14:49