Question

我在数据库中有两个商店，我试图在谷歌地图标记中获取商店指向两个商店。我在该信息窗口中点击ng来传递id在这里ng-click无法正常工作是否有任何想法通过id通过ng-click

＆＃13;

.controller('MapCtrl', [
    '$scope', '$http', '$location', '$window',
 
function ($scope, $http, $location, $window) {
    $http.get('****').success(function (data, dealers, response) {
        function initialize() {
            var serverData = data;
            $scope.locations = [];
            for (var i = 0; i < serverData.length; i++) {
                var modal = [
                data[i].Store_Name, data[i].S_Location.Latitude, data[i].S_Location.Longitude, i, 'images/arrow.svg', data[i].S_Address];
                $scope.locations.push(modal); 
            }
            console.log($scope.locations);
            //---------------------------------------------------------
            //console i am getting like this
            var locations = [
                ['nokia store', '12.971599', '77.594563', '1', 'images/arrow.svg.svg', '55a78953815356700bee698f'],
                ['samsung store', '12.9065534', '77.5774802', '2', 'images/arrow.svg.svg', '55a786d1815356700bee6982'], ];
            //----------------------------------------------------------
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(12.9667, 77.5667),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            for (i = 0; i < $scope.locations.length; i++) {
                //console.log($scope.locations[i][1]);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.locations[i][1], $scope.locations[i][2]),
                    map: map,
                    icon: $scope.locations[i][4],
                    animation: google.maps.Animation.DROP,
                });
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent('<div class="marker-box"><div class="marker-title">' + $scope.locations[i][0] + '</div><input type="button" value="Book Now" name="Book Now" ng-click="getid(' + $scope.locations[i][5] + ') "/></div>');
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
            $scope.map = map;
        }
        $scope.getid(id) {
            console.log(id);
        }
    });

＆＃13;

Answer 1

所以问题是你发送给infowindow的普通HTML还没有通过Angular编译器传递，因此它没有对ng-click应用任何魔法。

你需要做的是将Angular的$ compile服务注入你的控制器（你应该在一个指令中看到它正在操纵DOM），并且在你设置infowindow的内容之前，做一些像这样：

infowindow.setContent('<div class="marker-box"><div class="marker-title">' + $scope.locations[i][0] + '</div><input type="button" value="Book Now" name="Book Now" ng-click="getid(' + $scope.locations[i][5] + ') "/></div>');
$compile(infowindow.content)($scope);
infowindow.open(map, marker);

尝试并查看它是否有效，它应该，但如果它不确保您将正确的数据传递到$ compile服务。您可能必须在调用infowindow.setContent()

之前编译HTML字符串祝你好运！ https://docs.angularjs.org/api/ng/service/$compile

<强>更新

确保将$ compile服务注入控制器，如下所示：

.controller('MapCtrl', [ '$scope', '$http', '$location', '$window', '$compile', function ($scope, $http, $location, $window, $compile) { ... // now you can use $compile $compile(infowindow.content)($scope); ... } ]);

ng-click无法在谷歌地图angularjs中工作？

1 个答案: