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

时间:2015-07-04 08:53:23

标签: angularjs google-maps angularjs-directive ng-map

我正在尝试使用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

我错过了什么。 感谢

1 个答案:

答案 0 :(得分:0)

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>' }; }) for example

相关的错误之一

要解决这个问题,从您的指令声明中移除cellTemplate ,它将起作用

例如:

columnDefs

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

enter image description here