How to sanitize html code for dashboard ng-bind-html

[Kobi]

Hi

When I put below code directly into dashboard template widget it woks correctly:
<md-checkbox ng-model="isChecked" aria-label="Finished?" ng-change="send({payload: isChecked})">Finished?</md-checkbox>
but if I assign same code to msg.payload and use <div ng-bind-html="msg.payload"></div> inside template it doesn't work. Angular html binding cut off all directives because they are "unsafe".
Is there any simple workaround for that problem?

[Julian Knight]

Yes, it is never going to be safe to be able to pass Angular directives into Angular. You can only pass HTML into the ng-bind-html directive as far as I am aware.

Perhaps if you explain a little more of what you are trying to achieve?

[Kobi]

I'd like to create dynamic table, for the example let say that it will be table of checkboxes.
Static example of table contains three checkboxes:
[{"id":"ace82b6c.3dc4f","type":"debug","z":"463a17e7.47518","name":"","active":true,"console":"false","complete":"payload","x":624,"y":188,"wires":[]},{"id":"eeca3937.64ba38","type":"ui_template","z":"463a17e7.47518","group":"af3329ea.de75f","name":"list","order":0,"width":0,"height":0,"format":"<div>\n<md-list>\n    \n<md-list-item>\n  <span>1st Line</span>\n  <md-checkbox class=\"md-secondary\" ng-model=\"isChecked1\" ng-change=\"send({topic: 1,payload: isChecked1})\"></md-checkbox>\n</md-list-item>\n\n<md-list-item>\n  <span>2nd Line</span>\n  <md-checkbox class=\"md-secondary\" ng-model=\"isChecked2\" ng-change=\"send({topic: 2,payload: isChecked2})\"></md-checkbox>\n</md-list-item>\n\n<md-list-item>\n  <span>3rd Line</span>\n  <md-checkbox class=\"md-secondary\" ng-model=\"isChecked3\" ng-change=\"send({topic: 3,payload: isChecked3})\"></md-checkbox>\n</md-list-item>\n\n</md-list>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":195,"y":189,"wires":[["3f8a0cb8.4a1fc4"]]},{"id":"3f8a0cb8.4a1fc4","type":"function","z":"463a17e7.47518","name":"msg format","func":"msg.payload=\"Row \"+msg.topic+\" \"+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":415,"y":188,"wires":[["ace82b6c.3dc4f"]]},{"id":"af3329ea.de75f","type":"ui_group","z":"","name":"List group","tab":"bd9e186d.65ba","order":1,"disp":true,"width":"6"},{"id":"bd9e186d.65ba","type":"ui_tab","z":"","name":"List","icon":"dashboard","order":4}]

I thought that creating dynamic table (number of rows will change over time) will be simple, just place function that generate html code with Angular directives and feed it into dashboard template...

[Dave C-J]

Well you can use the moustache based template node we have in the editor to build vanilla html then feed that into the bind.

[Kobi]

Werid thing but in my case ng-bind-html filtered out even pure html directives.

My workaround (using developer version of dashboard):
I've added new functoin to application controller in dashboard main.js:
this.trustAsHtml = function (html) {
    return $sce.trustAsHtml(html);
};   
then I've used this code inside dashboard template:
<div ng-controller="MainController as ctrl">
<div ng-bind-html="ctrl.trustAsHtml(msg.payload)"></div>
</div>
after that pure html works but angular directives doesn't :( I'm afraid that I need to write new dashboard control:/

[Julian Knight]

I'd forgotten this, but it is possible to add code to Angular via the Dashboard with a script such as:

;(function(scope) {
    scope.devTracker = {}

    scope.$watch('msg', function(newVal, oldVal) {

        //console.dir(oldVal)

        //console.dir(newVal)

        // Wrap in try because first execution may be initial when msg is empty

        //try {

            //console.log('here %s, %s', newVal.topic, newVal.payload)

            var t = newVal.topic.split('/')

            newVal.topic = t[t.length - 1]

           

            newVal.lastUpdate = new Date()

           

            //newVal.containerClass = ! scope.devTracker[newVal.topic].containerClass

            //console.log( "Container Class: %s", newVal.containerClass)

           

            scope.devTracker[newVal.topic] = newVal

           

            if ( 'count' in scope.devTracker[newVal.topic] ) {

                scope.devTracker[newVal.topic].count += 1

            } else {

                scope.devTracker[newVal.topic].count = 1

            }

           

        //} catch (e) {

            // Nothing to do

        //}

        console.dir(scope.devTracker)

    })

})(scope)

</script>

Not sure if that helps in this case but sharing just in case.