在弹出启用点击(MapBox)(Enable ng-click on a popup (mapbox

2019-09-30 09:45发布

首先,我想对我的英文不好道歉

我的工作与标志物和所有与mapboxgl声明弹出一个地图上,我试图把NG-点击进入我的控制器实例化一个弹出的按钮

   myMap.on('touchstart', function (e) {
        var features = myMap.queryRenderedFeatures(e.point, { layers: ['points'] });
            if (!features.length) {
                return;
            }
            console.log(features);
            var feature = features[0];

        if(popup == undefined){

            var html = '<div class="popup-info">';
            html += "<h5>"+ feature.properties.type + "</h5>";
            html += "<p>"+ feature.properties.description +"</p>";
            html += '<button ng-click="goToComment()">Commentaires (' + nbComment +') </button>';
            html += "</div>";
            html += '<a href="#" class="btn-like"><div style="width: 100%">';
            html += '<div class="popup-like-img"><img class="icon icons8-Thumb-Up" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACeUlEQVRoQ+1Z7XHVMBDcrQBSAaQCSAVAB1ABUAGkAkIFhAogFQAVkFRAqIBQAelgmWVk5sW2bNk+TZ5mcjP+86wn3d6t7stEsEi6D+ALgKcAPgM4JnkdfMz/7Ri9saS3AD7s7HtJ8ij6nG6/GgDOATzpKfyapL0RLjUAaETLC5KmVLiEApD0PPF/oCjJ0LOqUEiSafJyzMx7DyBFnz8Zjvwm+TCcPwDC3CrpBMC7jJLfSJpe4RICIFn/FwDngDFxLjgN1z7KAzPWt95HJC/3EkCB9avx3wbZTCFJpsabCet+JOnsXEU2AZD0GMCPGc2ekXR2riJbAVh5g5iSg70s5gou7j9QtRJYZ7FVHpgqGUZcUS0CrbrEifffJ2J+H4P5/6JPo7TPg0RB09CZepeO7iH8XweB7B1a5IEUMs37NWVBp4SVzCW83F2yAb6OvVwKwJ1WlZJgJhBkQ3ExAEmu502d25D3JF1rDWQJANc6a6gTAfiQ5NVqAJI+AXgVocnKPbLJcNIDktzbugy4Dd73sZ6SPO7/mAUgaay3XWnAsL8NLnNrAK5JHuyaozUAg9KkNQBnJG8Ek5YAnDmg9EuSVgBkhwKtAPC9Hc3GLQEwiEFCaw3AwAutARjMl1oCcOGSptUolJ3steCBK5KHuWqqBQDWPfuFpxUA2S88sx1Zmh64E3NP4OdeWHFcvtH2nrg7S5KLKT/9D3nl6ixbOVoDdVvMeiB3liR7xd2am/1Hy3QqWv0TwElunLIZwK4KaV7keY/BGFj3eHBVKo7zbtw9PzrPNfHFLWXpqaXr0l26MdCKmFqvplCp4rXX3QGobeG5/e88MGeh2u//AqzK4zHLKbkNAAAAAElFTkSuQmCC" width="30" height="30"></div>';
            html += '<div class="popup-like-nb"><p class ="popup-like-nb-text"> 13 </p></div></div></a>';
            /*linkFunction = $compile(angular.element(html));
            newScope = $scope.$new();
            console.log(linkFunction(newScope));
            linkFunction(newScope)*/

            popup = new mapboxgl.Popup({})
                .setLngLat(feature.geometry.coordinates)
                .setHTML(html)
                .addTo(myMap);
            }
            else {
                popup.remove();
                popup = undefined;
            }
    });

问题是,我的应用程序似乎并不能够做的NG-点击,我一直在寻找$编译(html的声明之后注释部分右),因为我认为这是在控制器实例化的HTML的一个问题,如果有人有任何如何让我的NG-单击该实例化的弹出窗口工作的想法。

THX verymuch!

Answer 1:

你必须编译$编译HTML。 请点击这里

$scope.fn = function () {
   alert('Clicked');
 };

 var html = '<button ng-click="fn()">Click Me</button>';
 var compiledHtml = $compile(html)($scope);


 var popup = new mapboxgl.Popup()
  .setLngLat([-91.874, 42.760])
 .setDOMContent(compiledHtml[0])
  .addTo(map);


文章来源: Enable ng-click on a popup (mapbox)