Using the msg.payload to change ui template

Dashboard
19

I edited manually the flow in order to try to understand the issue at hand.

<!DOCTYPE html>
<html>

<body>
    <div ng-bind-html="msg.payload"></div>
    <p>Image to use:</p>
    <img id="scream" width="900" height="800" src="/route.png" alt="The Scream">
    <p>Canvas:</p>
    <canvas id="myCanvas" width="1000" height="950" style="border:1px solid #d3d3d3;"> </canvas>
    <script>  
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img, 0, 0);
        if (msg.payload == 'hey') {
            ctx.beginPath(); ctx.arc(30, 30, 30, 0, 2 * Math.PI);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.stroke();
        } 
    </script>
</body>

</html>

The question seems to boils down to : How to read msg.payload property inside the script tag in an UI template node.

I guess the solution is to make use of scope.$watch

1 Like