Widgte HTML with AngularJS Directive (Update Device Properties). When click on a button, does not change the device property (does not run the function)

[EBA]

Hello,

The context is the next: I want to show in a table a property called “scene”. The structure of this property “scene” can change. I mean, the number of properties into the “scenes” can change: “scene1”, “scene2”, “scene3”, etc.

Every row of that table (the table has a header) is one of that “sceneX” of that device. For that reason, I am creating that table dinamically. Everything works ok, but the problem that I have is the next: in the last column, I put an <input> with type “checkbox”. It shows the property “state” of the “sceneX” (this is a boolean variable) and it changes that property if the user click on it.

The problem: When the user click on it, the function does not run, so the property “state” does not change.

I am adapting my case to this example: https://docs.thinger.io/features/dashboards#angularjs-directive-update-device-properties

I have put the variables into AngularJS Directive, in this:

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

I have gotten the state of “sceneX” in this way (it works):

//Leer el estado de la escena (para luego indicarlo con el botón)
      var isActive = myObjScene.scenes[sceneKey].active;

I have created the table, and it shows the button with the state value obtained:

var isActive = myObjScene.scenes[sceneKey].active;


(...)


if (isActive) {
                        cell4.innerHTML = '<label class="switch"><input type="checkbox" class="toggle-switch" ng-change="toggleSceneState(' + sceneNumber + ')" ng-model="isActive" checked><span class="slider"></span></label>';
                    } else {
                        cell4.innerHTML = '<label class="switch"><input type="checkbox" class="toggle-switch" ng-change="toggleSceneState(' + sceneNumber + ')" ng-model="isActive"><span class="slider"></span></label>';
                    }

Notice that I am putting dinamically the sceneNumber: It works well, in the console I can see the correct value of “isActive” (state property) and the correct sceneNumber:

 //ng-change="toggleSceneState(1)
// ng-change="toggleSceneState(2)
// ng-model="isActive"

(...)

But when I click on it (like an user), it never runs the function for change the device property “state”:

// Función para cambiar el estado de la escena y enviar al servidor
            $scope.toggleSceneState =function(sceneNumber)  {
                
                console.log("Entro en la función toggleSceneState");

I do not undersant why the function does not trigger when I click on this button. I believe that is correct to put “ng-change” in that input, no?

Help please!

Thank you in advance!

[jaimebs]

Hi @EBA

Your example seems rather complex and specific to your use case for us to be able to reproduce it.

As a suggestion, I would go step by step with a simple HTML widget and a separate dashboard, taking small steps until you reach your current issue.

As an example, I’ve created an HTML widget which takes the boolean value of a device property, and I’ve checked that the function is called:

helloWidget.js

angular.module('helloWidget', [])
.directive('helloWidget', function () {
    return {
        restrict: 'EA',
        scope: {
            source : "=",
            ts:      "=",
            value:   "="
        },
        templateUrl: function(){
            let url = document.querySelector("script[src*='helloWidget.js']");
            return url.src.replace('.js','.html');
        },
        controller: ["$scope", function($scope){
            console.log("controller initialized! scope is", $scope);
            
            // listeners for process source changes (if required)
            $scope.$watch('source', function(newVal, oldVal) {
                console.log("Source has changed:", newVal, oldVal);
            });
            
            // listeners for process value changes (if required)
            $scope.$watch('value', function(newVal, oldVal) {
                console.log("Value has changed:", newVal, oldVal);
            });
            
            $scope.paintGraph = function () {
                console.log("hello!");
            }
            
        }]
    }
});

helloWidget.html

<div>
    <h3>Hello World from AngularJS directive!</h3>
    <!-- p><strong>Source</strong> is {{source.device.id}}</p -->
    <p><strong>Timestamp</strong> is: {{ts}}</p>
    <p><strong>Value</strong> is: {{value}}</p>
    
    <label class="switch"><input type="checkbox" class="toggle-switch" ng-change="paintGraph()" ng-model="value"><span class="slider"></span></label>
</div>

Your issue may come from any number of possibilities. I hope you are able to find it!