带有指令和表达式的 ui-gmap-window

【问题标题】：ui-gmap-window with directives and expressions带有指令和表达式的 ui-gmap-window
【发布时间】：2015-07-14 11:52:56
【问题描述】：

我正在尝试将一些 HTML 模板放入 ui-gmap-window。 HTML 包含诸如 ng-click 和 ng-repeat 之类的指令，但它们不起作用。

<ui-gmap-google-map bounds="map.bounds" 
                        center="map.center" 
                        zoom="map.zoom" 
                        options="options">
      <ui-gmap-window options="windowOpt"
                      show="windowOpt.show"
                      closeClick="closeWindow">
        <div class='map-popup'>
            <div><a ng-click='doIt()' href='#'>Action</a></div>
            <div ng-repeat="item in list">
                {{item.content}}
            </div>
        </div>
      </ui-gmap-window>
</ui-gmap-google-map>

或者，也许我需要使用另一种方式在 ui-gmap-window 内创建类似轮播的内容？

谢谢

这是一个示例： http://plnkr.co/edit/k8vvW3

【问题讨论】：

标签： angularjs google-maps-api-3 angular-google-maps

【解决方案1】：

google了一下，找到this Github issue。

简而言之，要在窗口中使用 ng-repeat（或其他角度指令），您需要将外部窗口模板和自定义模板参数传递给您的 <ui-gmap-window>，如下所示：

index.html:

<ui-gmap-window options="windowOpt"
    show="windowOpt.show"
    closeClick="closeWindow"
    templateUrl="'windowContent.html'"
    templateParameter="windowParams">
</ui-gmap-window>

script.js：

$scope.windowParams = {
    list: $scope.list,
    doIt: function() {
        return $scope.doIt()
    }
}

windowContent.html：

<div class='map-popup'>
    <div><a ng-click='parameter.doIt()' href='#'>Action</a></div>
    <div ng-repeat="item in parameter.list">
        {{item.content}}
    </div>
</div>

Plunker 演示：http://plnkr.co/edit/mu8jfCJhwSHbCghYpdkr?p=preview

【讨论】：