从信息窗口 NgMap 调用方法答案

【问题标题】：Call a method from infowindow NgMap从信息窗口 NgMap 调用方法
【发布时间】：2023-03-21 04:20:01
【问题描述】：

我有一个信息窗口。我正在尝试基于复选框调用函数。这是我的代码

 $scope.showDetails = function(e, pothole) {
            console.log(pothole);
            var infowindow = new google.maps.InfoWindow();
            var center = new google.maps.LatLng(pothole.lat,pothole.lng);

            infowindow.setContent(
            '<label class="switch">'+
                '<input ng-model="mycheckbox" ng-change = "remove(pothole.lat,pothole.lng,mycheckbox)" type="checkbox" checked />'+
            '<span class="slider round"></span>'+
                '</label>');

            infowindow.setPosition(center);
            infowindow.open($scope.map);
        };

我在作用域上有那个删除方法。但它没有被调用。这是代码

$scope.remove = function(lat, long,mycheckbox){
            alert(mycheckbox);
        }

有人可以帮助我吗？谢谢

【问题讨论】：

您是否尝试过删除 html 字符串中的空格？ ng-change = "remove 到 ng-change="remove

标签： javascript angularjs infowindow ng-map

【解决方案1】：

要使ng-change 事件触发，信息窗口内容需要编译使用$compile service。

替换

infowindow.setContent(
            '<label class="switch">'+
                '<input ng-model="mycheckbox" ng-change = "remove(pothole.lat,pothole.lng,mycheckbox)" type="checkbox" checked />'+
            '<span class="slider round"></span>'+
                '</label>');

与

var content = '<label class="switch">'+
                    '<input ng-model="mycheckbox" ng-change = "remove(pothole.lat,pothole.lng,mycheckbox)" type="checkbox" checked />'+
                '<span class="slider round"></span>'+
                    '</label>';
var compiledContent = $compile(content)($scope);
infowindow.setContent(compiledContent[0]);

注意：$compile service需要注入控制器

演示

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function ($scope, NgMap, $compile) {

        NgMap.getMap().then(function (map) {
            $scope.map = map;
        });
        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];
       

        $scope.showCity = function (e, entity) {

            var infowindow = new google.maps.InfoWindow();
            var center = new google.maps.LatLng(entity.pos[0], entity.pos[1]);
            $scope.selected = entity;


            var content = '<label class="switch">' +
                '<input ng-model="selected" ng-change="removeCity(selected)" type="checkbox" ng-true-value="{{selected}}" ng-false-value="{{selected}}" checked />' +
                '<span class="slider round"></span>' +
                '</label>';
            var compiledContent = $compile(content)($scope);
            infowindow.setContent(compiledContent[0]);



            infowindow.setPosition(center);
            infowindow.open($scope.map);
        };


        $scope.removeCity = function (entity) {
            console.log(entity);
        }

    });

<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="angular.js@*"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>



<div ng-app="mapApp" ng-controller="mapController">
  <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
    <marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
    </marker>
  </ng-map>

</div>

【讨论】：