使用 ng-map 指令的自定义指令，dom 更改但未反映在地图上

Question

我正在尝试使用 ngMap 指令之一创建自定义指令。形状，具体来说。

angular
  .module('seeMeApp', ['ngMap'])
  .directive('userPath', function () {
    return {
      restrict: 'E',
      scope: {
        user: '=userObj',
        weight: '=',
        opacity: '='
      },
      replace: true,
      template: '<shape name="polyline" path="{{user.pathCoordinates}}" geodesic="true" stroke-color="{{user.color}}" stroke-opacity="{{opacity}}" stroke-weight="{{weight}}"></shape>'
    };
  })

当我直接在 ngMap 的 map 指令中使用 shape 指令时，模型中的变化被插值并反映在地图上。

<map ng-show="pathCoordinates.length > 0" center="{{pathCoordinates[pathCoordinates.length - 1]}}" zoom="15">
    <shape ng-if="pathCoordinates.length > 0" name="polyline" path="{{pathCoordinates}}" geodesic="true"
    stroke-color="{{mapConfig.color}}" stroke-opacity="{{mapConfig.opacity}}" stroke-weight="{{mapConfig.stroke}}"> </shape>

</map>

但是，当我使用 Shape 创建自定义指令时，dom 发生了变化，但在地图上没有创建可见的形状。

我在这里创建了一个 plunker：

http://plnkr.co/qrRxYxORvdKdLAng50Yn

我错过了什么。谢谢

Answer 1

`replace: true`

我认为这是与 replace: true (for example)

相关的错误之一

要解决它，从您的指令声明中删除 replace: true，它将起作用

例如：

  .directive('userPath', function () {
    return {
      restrict: 'E',
      scope: {
        user: '=userObj',
        weight: '=',
        opacity: '='
      },
      template: '<shape name="polyline" path="{{user.pathCoordinates}}" geodesic="true" stroke-color="{{user.color}}" stroke-opacity="{{opacity}}" stroke-weight="{{weight}}"></shape>'
    };
  })

使用 ng-map 指令的自定义指令，dom 更改但未反映在地图上

Custom Directive using ng-map directives, dom changes but not reflected on map

angularjs

google-maps

angularjs-directive

ng-map

`replace: true`

演示 - http://plnkr.co/edit/5OcOQWCp81HdIlsqXtPD?p=preview