AngularJS ng-click 在 Google Maps InfoWindow 内答案

【问题标题】：AngularJS ng-click inside of Google Maps InfoWindowAngularJS ng-click 在 Google Maps InfoWindow 内
【发布时间】：2013-09-17 13:56:20
【问题描述】：

在这个问题之后： AngularJS ng-include inside of Google Maps InfoWindow?

提供的解决方案效果很好，但我在将 ng-click 添加到模板时发现了一个问题，它没有得到评估。

<script type="text/ng-template" id="/test.html">  
   <h4>{{latLng[0]}},{{latLng[1]}}</h4>   
   <button ng-click="clickMe()"/>click</button>
 </script>

clickMe 只是测试控制器内部的功能，

$scope.clickMe = function(){
  alert("clicked");
}

附加信息： ng-hide 的评估结果很好：

<script type="text/ng-template" id="/test.html">  
  <h4>{{latLng[0]}},{{latLng[1]}}</h4>   
  <button ng-hide="true" ng-click="clickMe()"/>click</button>
</script>

任何帮助都会很棒，谢谢大家，我已经摸索了几天，但没有任何结果。

问候吉姆

【问题讨论】：

<button> 不是自闭合标签。格式错误的 html 可能会导致您的问题。应该是：<button ng-click="clickMe()">click</button>.
您的问题也可能是范围。为了帮助缩小问题范围，请设置ng-hide="foo" 和设置ng-click="foo=!foo"。如果单击时按钮消失，则 ngClick 正在工作。
按钮没有消失，你建议的测试，干杯
哦！刚刚注意到您问题上的google-maps 标签。单独使用 GoogleMaps api 是一个巨大的痛苦，而使用 Angular 则更加麻烦。尝试在那里粘贴一个 ng-transclude。如果该属性不起作用，则必须编写自定义指令并在模板上调用 $scope.$compile()，然后再将其注入 DOM。
感谢 Jacob，我在将模板注入 DOM 之前已经编译了模板，除了 ng-click 没有正确绑定之外，一切正常。

标签： google-maps angularjs

【解决方案1】：

问题是，您插入的是 innerHTML 而不是编译后的标签作为 infoWindow 的内容。所以你的代码被评估一次，你只传递这个编译的静态内容。请尝试使用infoWindow.setContent(compiled[0]) 而不是infoWindow.setContent(compiled[0].innerHTML)

【讨论】：

编译[0]后是否破坏了infoWindow的风格？

【解决方案2】：

我确实遇到了这个问题，想分享我的解决方案，请理解这是一个特定的用例解决方法，需要重新路由用户，这在您的场景中可能根本不起作用。

我所做的是首先将参数传递给我需要的每个标记对象，这样就可以通过这个在信息窗口中访问它们。然后我删除了 ng-click，而是使用了一个带有 href 的 a 标签，以及我在删除 ng-click 后需要的参数。这是代码位：

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        id: myParam1
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent('<div id="content">'+
        '<a href="/site#/alinkroute?id='+this.myParam1+'">A ref to new template</a><br>'+
        '</div>'
      );
      infowindow.open(map, this);
    });

然后我让 routeProvider 提供到此地址的标准模板的路由，其中我有一个 ng-init 调用我的 ng-click 没有参数。在我的 ng-click 中，我使用标准 javascript 来解析参数的 url，并获得我的 ng-click 所需的值。

如果这对任何人有帮助，我很感兴趣。

【讨论】：