如何调试没有被调用的 AngularJS 函数？

Posted 2023-05-09

【中文标题】如何调试没有被调用的 AngularJS 函数？

【英文标题】：How can I debug AngularJS function not getting called?

【发布时间】：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 不正确，它可以处理它。 ***.com/questions/16813945/…

@eventHandler 我同意 Charly 的观点，我之前把它们用链子锁住了，它曾经工作过。

@charly1212 指向我的答案与我已经做过的不一样吗？我不确定我在这里缺少什么；

device 在a 标签中代表什么？应用程序是否在没有任何警告的情况下正确呈现？

【参考方案1】：

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

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