如何从传单弹出 html 中的复选框 onchange 调用 Angular 函数？

问题描述

我正在使用 Leaflet，但我的标记很少。因此，当将鼠标悬停在标记上时，会打开一个弹出窗口，在该弹出窗口中，有一个复选框。所以我需要的是每当用户单击该复选框时，它应该更改弹出内容。例如，

复选框名称是“更多信息”。默认弹出窗口包含悬停后的纬度和经度。当用户单击该复选框时，弹出窗口应显示城市、状态以及纬度和经度。我在复选框的 onchange 事件中创建了一个带有函数的复选框，但它没有调用创建的 angular 函数，而是在寻找 JavaScript 函数。我如何才能调用 Angular 函数，或者是否有其他解决方法来实现它？

我使用过以下方法，

<input type="checkBox" onchange="showDetails(this);"/>
<input type="checkBox" onchange={{showDetails(this);}}/>

我的示例代码如下

L.Routing.control({
    waypoints: waypoints,lineOptions: {
      styles: [{color: '#453f30',opacity: 1,weight: 5}],addWaypoints: false,extendToWaypoints: false,missingRoutetolerance: 0,},plan: L.Routing.plan(waypoints,{
      createMarker: function (i,wp) {
        return L.marker([latitude,longitude],{
          icon: icon,}).bindPopup('<input type="checkBox" onchange={{showDetails(this);}}/>More Info',{
          closeButton: true,}).on("mouSEOver",function (event) {
          event.target.openPopup();
        });
      }
    })
  }).addTo(this.map);

解决方法

您已经非常接近解决方案了。您可以像上面那样使用与 popupopen 事件相同的 mouseover 事件。您的复选框应该是这样的。

<input type="checkbox" id="chkbox1"/>

然后进行如下操作，

}).bindPopup('<input type="checkbox" id="chkbox1"/>More Info',{
  closeButton: true,}).on("mouseover",function (event) {
  event.target.openPopup();
}).on("popupopen",function (event) {
    // Here I am using JQuery. You can add JQuery to your Project
    $("#chkbox1").on("click",e => {
        e.preventDefault();
        
        if ($("#chkbox1").is(":checked")) {
            // your code goes here if checked
        } else {
            // 
        }
    });
});