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

Question

我正在尝试将一些 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

Answer 1

稍微谷歌了一下，找到this Github issue .

简而言之，要在您的窗口内使用 ng-repeat(或其他 Angular 指令)，您需要将外部窗口模板和自定义模板参数传递给您的 <ui-gmap-window>如下:

index.html:

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

脚本.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