Template Head Section: scope is not defined

Dashboard
1

node-red: 3.0.2
node-red-dashboard: 3.3.0

I am using the functionality of scope in the template. When the template is assigned to a group everything works fine, but not when it is assigned to the head section.

image

As soon as I try to use the scope there, I get the error message "scope is not defined".

image

My goal is to automatically change values for a notification functionality. The notification function must be visible on every tab, so it can only be assigned to the head section.
My test code looks like this:

image
image699×261 6.07 KB

Is it not possible to use the scope in combination with the template head section or did I do something wrong?
Otherwise I would be interested in alternatives solutions to automatically change values in the head section.

2

To help you, you'd have to specify your use case a bit.

From where and what are the notifications triggered?

Should an entry be made in the notification and should this in turn be output somewhere?

Which scope do you want to access in your example? The scope is assigned to a specific controller, or there would still be the global rootScope.
Angular Scopes.

3

There is misunderstanding of where the script is situated.
If you are targeting site head, it will be situated into the <head> tag in html and you can not reach any scope from there. And if there will be no scope, you can not send or receive any messages.
There is no option (or any other legal way) to add scripted ui_template into the top-bar (md-toolbar element). You can choose only specific group.

You can make kind of hack solutions where you define your top-bar elements in one ui_template and for every tab in use make another ui_template without any graphics but where you reach and script those top-bar elements. Complicated but if done correctly does the trick.

Overall, if dashboard needs already hacking, it is reasonable to look more advanced options for it. (uibuilder, flexDash, make your own)

4

I tried to give you an example where you can change a variable in the rootScope from different ui-templates on different tabs. A watch-function for the rootScope-variable invokes the mdDialog Service. To my opinion this could be a start.

[
    {
        "id": "0d08b99f23b28073",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "08114bf8a7401901",
        "type": "ui_template",
        "z": "0d08b99f23b28073",
        "group": "",
        "name": "header",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "\n\n<script type=\"text/javascript\">\n    function generateRandomLetter() {\n        const alphabet = \"abcdefghijklmnopqrstuvwxyz\";\n        return alphabet[Math.floor(Math.random() * alphabet.length)]\n    }\n\n    var testShowAlert = function ($mdDialog) {\n        var alert = $mdDialog.alert({\n            title: 'Attention',\n            textContent: 'rootScope.myVar has changed!',\n            ok: 'Close'\n        });\n    \n        $mdDialog\n        .show( alert )\n        .finally(function() {\n            alert = undefined;\n        });\n    }\n\n    //Document Object Model (DOM) is ready for JavaScript code to execute\n    //==> is executed after the Angular App has been loaded, but before the Template Node functions are executed\n    //==> creates angular rootScope variables\n    angular.element(async function(){\n        try{\n            const dashboardElement = angular.element('#nr-dashboard');//get the apps root element\n            const injector = dashboardElement.injector();\n            const rootScope = injector.get('$rootScope');//get the root scope\n            if(!rootScope.hasOwnProperty('myVar')){\n                rootScope.$watch('myVar', function(variable){\n                    if(variable !== undefined && variable !== null){\n                        injector.invoke(window.testShowAlert,null,null);\n                    }\n                });\n                rootScope.myVar = null;\n            }\n        }catch(err){\n            console.error(err);\n        }\n    });\n    \n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 880,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "8fd8d666bda53841",
        "type": "ui_template",
        "z": "0d08b99f23b28073",
        "group": "0675ab3d55da9e2d",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<script>\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if(msg !== undefined && msg !== null){\n\n                try{\n                    if(!msg.hasOwnProperty('old')){\n                        msg.old = true;\n                        switch(msg.topic) {\n                            case \"button\":\n                                    console.log('change');\n                                    scope.$root.myVar = window.generateRandomLetter();\n                                    scope.send({topic:'myVar', payload:scope.$root.myVar});\n                                break;\n                            default:\n                                break;\n                        }\n                    }\n                }catch(err){\n                    console.error(err);\n                }\n            }\n        });\n    })(scope);\n</script>   ",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 880,
        "y": 500,
        "wires": [
            [
                "a3693a04261c8768"
            ]
        ]
    },
    {
        "id": "77da467d911b5259",
        "type": "ui_button",
        "z": "0d08b99f23b28073",
        "name": "",
        "group": "0675ab3d55da9e2d",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "change myVar",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "something",
        "payloadType": "str",
        "topic": "button",
        "topicType": "str",
        "x": 620,
        "y": 500,
        "wires": [
            [
                "8fd8d666bda53841"
            ]
        ]
    },
    {
        "id": "a3693a04261c8768",
        "type": "debug",
        "z": "0d08b99f23b28073",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1220,
        "y": 500,
        "wires": []
    },
    {
        "id": "0893a7a04e055afa",
        "type": "ui_template",
        "z": "0d08b99f23b28073",
        "group": "73abbeec4b5a6c38",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<script>\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if(msg !== undefined && msg !== null){\n                try{\n                    if(!msg.hasOwnProperty('old')){\n                        msg.old = true;\n                        switch(msg.topic) {\n                            case \"button\":\n                                    console.log('change');\n                                    scope.$root.myVar = window.generateRandomLetter();\n                                    scope.send({topic:'myVar', payload:scope.$root.myVar});\n                                break;\n                            default:\n                                break;\n                        }\n                    }\n                }catch(err){\n                    console.error(err);\n                }\n            }\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 880,
        "y": 620,
        "wires": [
            [
                "90e24c712644684a"
            ]
        ]
    },
    {
        "id": "14a669b7763e1813",
        "type": "ui_button",
        "z": "0d08b99f23b28073",
        "name": "",
        "group": "73abbeec4b5a6c38",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "change myVar",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "something",
        "payloadType": "str",
        "topic": "button",
        "topicType": "str",
        "x": 620,
        "y": 620,
        "wires": [
            [
                "0893a7a04e055afa"
            ]
        ]
    },
    {
        "id": "90e24c712644684a",
        "type": "debug",
        "z": "0d08b99f23b28073",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1220,
        "y": 620,
        "wires": []
    },
    {
        "id": "0675ab3d55da9e2d",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "3f70ba13fa26bc52",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "73abbeec4b5a6c38",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "739ec2e59a06d618",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "3f70ba13fa26bc52",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 1
    },
    {
        "id": "739ec2e59a06d618",
        "type": "ui_tab",
        "name": "Tab 2",
        "icon": "dashboard",
        "order": 2
    }
]
5

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