1

我已经尝试过这种方式，但仍然没有运气。请多多包涵，我是一名设计师。

到目前为止，我已经创建了一个Plunker。

我正在使用Angular Google Maps创建一个我想在其上输出我的标记的地图，单击其中一个将打开其信息窗口。在每个信息窗口中，我希望有一些交互式内容，例如按钮、链接、游行乐队等

我的问题是多方面的：

  1. 当我将信息窗口 html 放在标签内时，除非​​将 ng-non-bindable 放在父级上，否则不会显示任何变量。但是，我希望内容是交互式的。正如您将在我的代码中看到的那样，该按钮什么也不做。

    <ui-gmap-windows show="show">
    <div class="markerwindow" ng-non-bindable>
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <footer>
            <a href="http://foo-bar.com">Google</a>
            <button click="buttonClick(id)">Button</button>
        </footer>
    </div>
</ui-gmap-windows>

  2. 我无法在没有此错误的情况下使用 templateUrl 将模板分离到单独的文件中[我希望信息窗口最终会非常重要]：

    “可能未处理的错误：分块迭代器中的错误：错误：[jqLit​​e:nosel] jqLit​​e 不支持通过选择器查找元素！”

    <ui-gmap-windows show="show" templateUrl="templates/window.html">
</ui-gmap-windows>

  3. 最后，当我阅读文档时，我有时会为自己哭泣……

有人可以帮助我确定我的方法存在的问题吗？我真的很感激哪怕是一点帮助，因为我现在真的很难找到克服这个障碍的方法。

提前致谢。

4

1 回答 1

5

该templateURL属性是标记对象的一个​​属性。这是我目前正在处理的一些代码：

function createMarkers(data) {
  $scope.markers = data.map(function(marker){
    var tags = marker.tags.map(function(tag){
      return {
        tag: tag.tag,
        url: tag.url
      }
    })
    return ({
      id: marker.id,
      latitude: marker.position.lat,
      longitude: marker.position.lng,
      info: {
        title: marker.item,
        description: marker.note,
        place: marker.position.place,
        tags: tags
      },
      template: "views/partials/main/gmapWindow.html"
    })
  })
}

如您所见，我有一个名为的属性template，其中包含模板的 url（部分可能不是最好的命名......）。另请注意，我有一个名为的属性，其中包含和之类的info东西。titledescription

我的ui-gmap-google-map-directive 如下所示：

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
    <ui-gmap-windows
      templateUrl="'template'"
      templateParameter="'info'"
      show="'showWindow'"
      closeClick="'closeClick'"
    ></ui-gmap-windows>
  </ui-gmap-markers>
</ui-gmap-google-map>

请注意，我同时使用"了'intemplateUrl和templateParameter。templateUrl是包含模板字符串的属性（这样我们可以为不同的标记使用不同的模板），templateParameter也是标记模型中的属性。该属性包含一个我们传递给模板的对象。

最后，我们可以创建我们的模板并访问我们传递给它的对象，在我的例子中，info-object 是模型上的一个属性。

<div>
    <h3>{{ :: parameter.title }}</h3>
    <p><em>{{ :: parameter.description }}</em></p>
    <p><strong>{{ :: parameter.place }}</strong></p>
    <p class="muted">Tags: <tags marker="{{ :: parameter.tags }}" /></p>
</div>

哦，我在阅读文档时也哭了......

于 2016-03-18T22:10:20.013 回答