Ui-template: sending msg through a function

I have tried all day to send a message through a function within the ui-template.

Here is a very basic example (one of many tries) inspired from the ui-template help and few other but to be frank I am not familiar with the scope concept and it is not working. Any help will be very welcome;

<md-button ng-click="myfunction(Clair)">Clair</md-button>
<script>
(function(scope) {
    function myfunction(name) {
        scope.send({payload:name});
    };
})(scope);
</script>

Here are two ways to send messages

<script>
this.scope.action = function(value) { return value; }
</script>
<md-button ng-click="send({payload:action('clair')})">clair</md-button>

<!–– or with no script -->
<md-button ng-click="send({payload:'clair1'})">clair1</md-button>

Thanks, but how could I send the message within the function ?

My example does not make much sense but it is only to keep it simple and understand the principles

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}]

To send a msg using your function the function needs to be a property in scope.

(function(scope) {
    scope.myfunction = function(payload,topic) {
        let msg = {
            payload,
            topic,
            another:"test"
        }
        scope.send(msg);
    };
})(scope);
</script>
<md-button ng-click="myfunction('Clair
','topic1')">Clair</md-button>

Thanks greatly!

Node Red is a great solution rather easy to learn and use but as soon as you move to template to improve the UI, it is another game...
I was trying to use (learn) HTML/CSS basic features but I guess I need also to better master the scope concept and Angular in general.
Any recommendation on the best way to do that?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.