How can I debug AngularJS function not getting called?

Question

I have a table

I have constructed these rows and action buttons dynamically as soon as user clicked on Devices accordion.

When the user clicks on the (I)

<a href="" class="stats-modify-btn" title="Device Info" ng-hide="editDevice.num == $index" ng-click="device.viewEnabled = !device.viewEnabled; device.settingsEnabled = null; expandCollapseCurrent(device);"> <i class="fa fa-info ml15"></i> </a>

It should called expandCollapseCurrent() function. Somehow it never reaches there, and there is nothing in the console for me to understand why it didn’t reach

$scope.expandCollapseCurrent = function(currentDevice) {
    console.log('%c currentDevice = ' + currentDevice, "color: green;");
    angular.forEach($scope.private_devices, function(device) {
        if(device.name != currentDevice.name) {
            device.settingsEnabled = false;
            device.viewEnabled = false;
        }

        $scope.buttonShow.bandwidth = false;
        $scope.buttonShow.acl = false;
    });
}

It never did.

This is my entire code for that.

$('#wifi-devices-nav').click( function() {
    if($('#wifi-devices-nav').hasClass('callout-expanded')) {

        $.ajax({
            method: 'GET',
            url: '/api/telenet/' + '{{ $cpe_mac }}' + '/privateDevices',
            crossDomain: true,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
                "Cache-Control": "no-cache"
            },
            success: function(response){


                $('.lds-ripple').fadeOut();


                console.log(response.length);


                for (i = 0; i < response.length; i++) {


                    var device = response[i];


                    if(device.up) {
                        console.log(device);
                    }


                    if(device.device_activity != "OFFLINE" && device.device_activity_v6 != "OFFLINE" ) {


                        console.log(response[i]);

                        if(device.up) {
                            var uplink = device.up.value + ' ' + device.up.suffix;
                        }


                        if(device.down) {
                            var downlink = device.down.value + ' ' + device.up.suffix;
                        }


                        if(device.device_activity == 'ACTIVE') {
                            var deviceStatus = 'green';
                        }else {
                            var deviceStatus = 'orange';
                        }


                        let row = `
                        <tr id="tr-${device.device_mac}">
                        <td>

                        {{-- Status --}}
                        <i class="device-status-circle fa fa-circle ${deviceStatus}" style="margin-left:7px; ">
                        </i>


                        ${device.device_mac}
                        </td>
                        <td class="text-center">${device.ip_address_v6}</td>
                        <td class="text-center">${device.last_active} </td>
                        <td class="text-center">

                        <!-- View -->
                        <a href="" class="stats-modify-btn" title="Device Info" ng-hide="editDevice.num == $index" ng-click="device.viewEnabled = !device.viewEnabled; device.settingsEnabled = null; expandCollapseCurrent(device);"> <i class="fa fa-info ml15"></i> </a>

                        <!-- Edit -->
                        <a href="" class="stats-modify-btn" title="Edit" ng-hide="editDevice.num == $index" ng-click="editDevice.num = $index; hideAllBoxes()"> <i class="fa fa-pencil ml15"></i> </a>

                        <!-- Settings -->
                        <a href="" class="stats-modify-btn" title="Settings" ng-hide="editDevice.num == $index" ng-click="device.settingsEnabled = !device.settingsEnabled; device.viewEnabled = null; expandCollapseCurrent(device);"> <i class="fa fa-cog ml15"></i> </a>
                        </td>
                        </tr>

                        `;


                        $('#tablePrivateDevices').prepend(row).fadeIn('slow');
                    }

                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    }

});

Updated Observations

Any of the 3 buttons that I clicked, will refresh the page.

I have NO idea why it does that ...

Any hints/suggestions will mean a lot to me.

I gess `ng-click` does not accept such expression using semicolons. It should be a "one line" expression only. You should call a function to execute those three statements. — eventHandler, Nov 19 '20 at 17:25
@eventHandler not true, it can handle it. https://stackoverflow.com/questions/16813945/how-to-add-many-functions-in-one-ng-click — MWO, Nov 19 '20 at 17:30
@eventHandler I agree with Charly, I chained them before, and it used to work. — code-8, Nov 19 '20 at 18:17
@charly1212 Isn't the answer that pointed me to the same as what I already did ? I'm not sure what I am missing here; — code-8, Nov 19 '20 at 18:19
What does `device` represent in the `a` tag? Does the app render correctly without any warning? — eventHandler, Nov 19 '20 at 23:10

score 2 · Accepted Answer · answered Nov 20 '20 at 00:31

2

You can not just add html like <button ng-click="... you need to $compile it first. As you do not, directive is ignored and you get default browser behaviour - it follows href.

P.S. This mixture of jquery and angularjs looks pretty akward...

answered Nov 20 '20 at 00:31

Petr Averyanov

9,327
3
20
38

How can I debug AngularJS function not getting called?

Updated Observations

1 Answers1