I thought it was just my ineptitude, but no. It really is a pain to pass msg.payload to a script in ui-template nodes.
I don't get it. How else would we drive a ui-template node with msg data? Why so much contortion required to do something so fundamental?
I've lost a full day trying to do something so simple and I can't believe it. I'm used to losing days to problems but this one takes the cake. It's like trying to fly to the moon and discovering you have to pass through Jupiter first.
Are there plans to make essential tasks like this manageable and, you know---not supremely time consuming?
Have you seen the example in the Help of the ui-template node ?
It watches for incoming msgs and from there you can take the script to any direction you want.
<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
// Do something when msg arrives
$("#my_"+scope.$id).html(msg.payload);
}
});
})(scope);
</script>
The reason is that Dashboard was set up to help complete novices create a UI with no web experience at all. The person who wrote it was knowledgeable in AngularJS v1 and so that is what it used. It was later gifted to the Node-RED project & is now largely maintained by Dave.
The coding is undoubtedly clever and certainly fulfils its basic goals pretty well.
However, like many frameworks (and Angular is actually somewhat more complex than most), you eventually reach a cliff-edge. To go beyond what was originally envisaged, requires a sudden quantum leap in complexity.
That was why I created uibuilder. If you are a front-end coder or simply need something more flexible and are prepared to get stuck in, it gives you maximum flexibility and freedom. But it doesn't do any of the neat UI creation that Dashboard does (at least not yet).
Personally I really dislike Angular, I found it vastly over-complex. It might be good for really big, complex projects but it is hopeless for smaller things. But we can't look a gift-horse in the mouth - someone went to the trouble of creating an amazing tool in the form of Dashboard and it has done the community very well for some years now. What is worse though is that Dashboard is built on Angular v1 which is getting close to end of life.
However, unless someone has the time and energy to create a replacement ...
If someone wants to collaborate with me on getting uibuilder to a comparable state - I have some ideas but currently neither the time nor possibly the skills to create the zero-code replacement for Dashboard. I'm certain it can be done though.
Otherwise, accessing the guts of Angular in a template isn't that hard. The cookbook contains some suitable recipes as @UnborN says. There are also some on my blog though I think most of those were transferred to the cookbook as well.
