【问题标题】：How can I debug AngularJS function not getting called?如何调试没有被调用的 AngularJS 函数？
【发布时间】：2021-03-03 02:39:45
【问题描述】：

我有一张桌子

用户一点击 Devices 手风琴，我就动态构建了这些行和操作按钮。

当用户点击(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 个按钮中的任何一个都会刷新页面。

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

任何提示/建议对我来说意义重大。

【问题讨论】：

我猜ng-click 不接受使用分号的这种表达方式。它应该只是一个“单行”表达式。你应该调用一个函数来执行这三个语句。
@eventHandler 不正确，它可以处理它。 stackoverflow.com/questions/16813945/…
@eventHandler 我同意 Charly 的观点，我之前把它们用链子锁住了，它曾经工作过。
@charly1212 指向我的答案与我已经做过的不一样吗？我不确定我在这里缺少什么；
device 在a 标签中代表什么？应用程序是否在没有任何警告的情况下正确呈现？

标签： javascript html jquery angularjs ajax

【解决方案1】：

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

附： jquery 和 angularjs 的这种混合看起来很不协调......

【讨论】：