Ui-template: sending msg through a function

Dashboard
4

Here is a more complete example.
Note the following...

  • buttonName in the HTML is bound to scope.buttonName in the script
  • scope.func is set as a function & so is avaiable to call in ng-click as func(...)
  • When a msg arrives from node-red side, we can adjust scope.buttonName and it is immediately reflected in the dashboard button text
<md-button id="{{'my_button_'+$id}}" ng-click="func($event)">{{buttonName}}</md-button>

<script>
    (function(scope) {
        scope.buttonName = "clare";

        scope.func = function($event) {
            console.log("button clicked (you will see me in the console)");
            scope.send({payload:scope.buttonName});
        }

        //watch for incoming messages
        scope.$watch('msg', function(msg) {
            console.log("msg received", msg);
            if (msg && msg.topic == "set-button-text") {
                // Set button text when msg.topic == "set-button-text"
                scope.buttonName = msg.payload;
            }
        });
    })(scope);
</script>

Demo...
chrome_NYhflnPLqL

Flow (use CTRL+I to import)...

[{"id":"7e5679cc6a223311","type":"ui_template","z":"c2233fc1d8cc5c3b","group":"81dd3718.b97888","name":"","order":1,"width":0,"height":0,"format":"<md-button id=\"{{'my_button_'+$id}}\" ng-click=\"func($event)\">{{buttonName}}</md-button>\n\n<script>\n\n\n    (function(scope) {\n        scope.buttonName = \"clare\";\n\n        scope.func = function($event) {\n            console.log(\"button clicked (you will see me in the console)\");\n            scope.send({payload:scope.buttonName});\n        }\n\n        //watch for incoming messages\n        scope.$watch('msg', function(msg) {\n            console.log(\"msg received\", msg);\n            if (msg && msg.topic == \"set-button-text\") {\n                // Set button text when msg.topic == \"set-button-text\"\n                scope.buttonName = msg.payload;\n            }\n        });\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2780,"y":120,"wires":[["8ac528363579be05"]]},{"id":"e66177ee39c19a5b","type":"inject","z":"c2233fc1d8cc5c3b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set-button-text","payload":"sarah","payloadType":"str","x":2590,"y":120,"wires":[["7e5679cc6a223311"]]},{"id":"8ac528363579be05","type":"debug","z":"c2233fc1d8cc5c3b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":2770,"y":180,"wires":[]},{"id":"a5d7db11fcf7c2d2","type":"inject","z":"c2233fc1d8cc5c3b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set-button-text","payload":"clare","payloadType":"str","x":2590,"y":80,"wires":[["7e5679cc6a223311"]]},{"id":"81dd3718.b97888","type":"ui_group","name":"Home","tab":"4e11db25.239e94","order":1,"disp":true,"width":"8","collapse":true,"className":""},{"id":"4e11db25.239e94","type":"ui_tab","name":"Buttons","icon":"dashboard","order":1,"disabled":false,"hidden":false}]