如何调试未被调用的 AngularJS 函数？

Question

我有一个table

我已经在用户点击 Devices accordion 时动态构建了这些行和操作按钮。

当用户点击 (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>

应该调用expandCollapseCurrent()函数。不知何故它永远不会到达那里，控制台中没有任何内容让我理解为什么它没有到达

$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;
    });
}

从来没有。

这是我的全部代码。

$('#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);
            }
        });
    }

});

更新的观察结果

我点击的 3 个按钮中的任何一个都会刷新页面。

我不知道为什么会这样...

任何 hints/suggestions 对我来说都意义重大。

Answer 1

您不能只添加 html，例如 <button ng-click="...，您需要先添加 $compile。如果不这样做，指令将被忽略，您将获得默认的浏览器行为 - 它遵循 href.

P.S。 jquery 和 angularjs 的混合看起来很尴尬...

如何调试未被调用的 AngularJS 函数？

How can I debug AngularJS function not getting called?

html

javascript

ajax

jquery

angularjs

更新的观察结果