Angular指令中的Google Maps：如何更改infoWindow HTML內容

Question

我正在為Google Maps開發AngularJs指令。 看到這個矮人： https ://plnkr.co/edit/cRdiu6QkZsnDoZBRM1sJ ? p = preview

指令代碼也隨附：

app.directive('boatsMap', function () {

    function link(scope, element, attrs) {

        var cars = [{
                id : 1,
                price : 100,
                latitude : 39.65,
                longitude : 3.0175
            }, {
                id : 2,
                price : 200,
                latitude : 39.67,
                longitude : 3.0173
            }
        ];

        console.log("Is running the directive");
        var map;
        var index = 0;
        var zoom = 8;
        var geocoder = new google.maps.Geocoder();

        // Zoom is got from attributes, otherwise by default
        if (attrs.zoom) {
            zoom = attrs.zoom;
        }

        // Map center is calculated according to coordinates, otherwise is calculated accordint to location
        if (attrs.latitude && attrs.longitude) {
            var center = {
                lat : parseFloat(attrs.latitude),
                lng : parseFloat(attrs.longitude)
            };
            createMap(center, zoom);
        } else if (attrs.location != undefined) {
            geocoder.geocode({
                'address' : attrs.location
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var location = results[0].geometry.location;
                    var center = new google.maps.LatLng(location.lat(), location.lng());
                    createMap(center, zoom);
                }
            });
        }

        function createMap(center, zoom) {

            var mapOptions = {
                center : center,
                zoom : parseInt(zoom),
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                mapTypeControl : false,
                scaleControl : false,
                streetViewControl : false,
                rotateControl : false,
                fullscreenControl : false
            };
            map = new google.maps.Map(element[0], mapOptions);

            if (cars.length > 0) {
                console.log("New car!");
                for (var i = 0; i < 1; i++) {
                    var location = {
                        lat : parseFloat(cars[i].latitude),
                        lng : parseFloat(cars[i].longitude)
                    };
                    console.log("location.lat=" + location.lat);
                    console.log("location.lng=" + location.lng);
                    var content = '<div>'
                         + cars[i].price + "€"
                         + '</div>';
                    console.log("content=" + content);
                    var infoWindow = new google.maps.InfoWindow({
                            content : content,
                            position : location
                        });
                    google.maps.event.addListener(infoWindow, 'domready', function () {
                        var iwContent = document.querySelector('.gm-style-iw');
                        iwContent.parentNode.removeChild(iwContent.nextElementSibling);
                        iwContent.style.setProperty('width', 'auto', 'important');
                        iwContent.style.setProperty('right', iwContent.style.left, 'important');
                        iwContent.style.setProperty('text-align', 'center', 'important');
                        iwContent.style.setProperty('font-weight', '600');
                        iwContent.style.setProperty('color', '#777');
                    });
                    infoWindow.open(map);

                }
            }
        }
    };

    return {
        restrict : 'E',
        replace : true,
        template : '<div></div>',
        link : link
    };
});

我想做的是，當用戶單擊帶有價格的infoWindow時，內容應更改為另一個html內容 （與Airbnb效果相同）。 我知道此GM infoWindow對象沒有onclick事件，所以我猜想它必須以某種方式用Jquery完成（我不太了解jquery）。

我的第二個問題是是否有“角度方法”來做到這一點？

一個例子或我的朋克更新將不勝感激。

Answer 1

更改列表：

1） $compile服務需要注入指令中：

app.directive('boatsMap', [ '$compile', function($compile) {

     function link(scope, element, attrs) {
         //.. 
     }          


     return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: link,
        controller: function($scope, $element){

       }
    };
}]);

2）添加需要從信息窗口觸發的事件處理程序，例如：

function link(scope, element, attrs) { 
   scope.showDetails = function(){
       //...
    }
}

3）為了使Angular知道Info窗口的內容，需要使用$ compile服務對其進行編譯，以觸發ng-click類的事件，例如：

var content = '<button ng-click="showDetails()">Show details</button>';  
var compiledContent = $compile(content)(scope);

var infoWindow = new google.maps.InfoWindow({
    content:   compiledContent[0],
    position: location
});

改裝的矮人

更新

無法注冊信息窗口的click事件，如下所示：

  google.maps.event.addDomListener(infoWindow, 'click', function () {
    alert("Clicked in the infowindow!");
  });

相反，您可以考慮以下解決方案。

初始化信息窗口內容，如下所示：

var content = '<div ng-click=showDetails()>{{infoWindowText}} €</div>';

哪里

介紹了infoWindowText 作用域變量：

scope.infoWindowText = cars[0].price;

信息窗口的內容可以這樣更新：

 scope.showDetails = function(){
       scope.infoWindowText = cars[1].price;
 }

Plunker

更新（21.01.2018）

Plunker演示如何：

• 為動態html模板綁定AngularJs事件處理程序，例如在信息窗口中
• 為信息窗口指定html內容