启用ng-click弹出窗口（mapbox） [英] Enable ng-click on a popup (mapbox)

问题描述

首先，我想为我可怜的英语道歉

First I would like to apologize for my poor english

我正在使用mapboxgl声明标记和弹出的地图上工作，我正试图把点击我的控制器中实例化的弹出按钮

I'm working on a map with marker and popup all declared with mapboxgl, i'm trying to put a ng-click into a button of a popup instantiated in my controller

   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-click，我正在寻找for $ compile（在html声明之后的注释部分）因为我认为控制器中的实例化HTML存在问题，如果有人知道如何允许我的ng-click在该实例化的弹出窗口中工作。

The problem is that my app seems to not being able to do the ng-click, i was looking for $compile (comment part right after the html declaration) cause I think there is a problem with instantiated HTML in controller, if someone got any idea of how to allow my ng-click to work in that instantiated popup.

非常多！

推荐答案

你必须用$ compile编译html。查看此处

You have to compile html with $compile. Check here

$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);

这篇关于启用ng-click弹出窗口（mapbox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！