函数未在 html onclick 和 ng-click 中定义，并且 ui-sref 未触发

Question

我想在单击按钮时打开一个模式，该模式会动态添加到我地图上标记的信息窗口中。

我现在尝试了几件事，比如使用 onclick、ng-click 和 ui-sref。 onclick 不起作用，因为它说我的函数没有定义。 ng-click 没有触发，使用 $state.go('someState') 方法的 ui-sref 也没有。

var createMarkerOnMap = function (param) {

        if (param.hasOwnProperty('type')) {
            var contentString = "<h5>" + 'Social-Media-Filter ID: '+ param.id + "</h5><hr color='#000000' noshade>X Ereignisse in diesem Filter  <br>" + param.keywords;
            var infowindow = new google.maps.InfoWindow({
                content: contentString +
                '<br><button id="detailsButtonFilter" ng-click="test()" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>' +
                ' <button id= "editButtonFilter" ng-click="test()" class="btn btn-primary"><i class="fa fa-lg fa-cog"></i> Bearbeiten</button>'
            });

            // document.getElementById ("detailsButtonFilter").addEventListener ("click", bla, false);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(param.latitude, param.longitude),
                title: param.keywords,
                icon: getSocialMediaIcon(param.type)
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open($scope.map, marker);
            });

        } else {
            var contentString = "<h5>" + param.name + "</h5><hr color='#000000' noshade> Notfallwarnung Stufe " + param.warningLevel + " aktiv <br>";
            var infowindow = new google.maps.InfoWindow({
                content: contentString +
                '<br><button ng-click="test()" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button> ' +
                ' <button ng-click="test()" class="btn btn-primary"><i class="fa fa-lg fa-cog"></i> Bearbeiten</button>'
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(param.latitude, param.longitude),
                title: param.name,
                icon: setPdIcon(param.warningLevel)
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open($scope.map, marker);
            });
        }
        return marker;
    };

嗯...我认为我的动态添加的 HTML 没有正确呈现，但我不知道在这种情况下如何处理它。

image of my infoWindow

Answer 1

要使google.maps.InfoWindow 内的按钮可点击，需要使用$compile 服务编译content 属性：

var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
var compiledContent = $compile(content)($scope)

google.maps.event.addListener(marker, 'click', function () {
    $scope.infowindow.setContent(compiledContent[0]);
    $scope.infowindow.open($scope.map, marker);
});

示例

angular.module('map-example', [])
    .controller('MapController', function ($scope, $rootScope, $compile) {
        function initialize() {
            $scope.map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: -38.363, lng: 131.044 }
            });

            $scope.cities = [
                { title: 'Sydney', lat: -33.873033, lng: 151.231397 },
                { title: 'Melbourne', lat: -37.812228, lng: 144.968355 }
            ];

            //create a single instance of Info  Window
            $scope.infowindow = new google.maps.InfoWindow({
                content: ''
            });
            //render markers
            for (var i = 0; i < $scope.cities.length; i++) {
                createMarkerOnMap(i);
            }
        }


        var createMarkerOnMap = function (idx) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng($scope.cities[idx].lat, $scope.cities[idx].lng),
                map: $scope.map,
                title: $scope.cities[idx].title
            });
            
            var content = '<button ng-click="cityDetail(' + idx + ')" class="btn btn-primary"><i class="fa fa-lg fa-eye"></i> Details</button>';
            var compiledContent = $compile(content)($scope)

            google.maps.event.addListener(marker, 'click', function () {
                $scope.infowindow.setContent(compiledContent[0]);
                $scope.infowindow.open($scope.map, marker);
            });

        };

        $scope.cityDetail = function (index) {
            alert(JSON.stringify($scope.cities[index]));
        };

        google.maps.event.addDomListener(window, 'load', initialize);
    });

html, body {
        height: 400px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="map-example" ng-controller="MapController"> 
    <div id="map"></div>   
</div>

Answer 2

似乎问题在于参数的顺序。事件处理程序需要是这样的第一个参数

google.maps.event.addListener('click', hereComesTargetEvent, function() {
  infowindow.open($scope.map, marker);
});