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

Question

I am trying to create a custom directive using one of ngMap directives. Shape, to be specific.

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

When I use the shape directive directly inside map directive of ngMap, the changes in model are interpolated and reflected on map.

<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>

But when I create a custom directive using Shape, the dom changes but no shape is created visible on Map.

I have created a plunker here for same:

http://plnkr.co/qrRxYxORvdKdLAng50Yn

What am I missing. Thanks

Answer 1

replace: true

I think this is one of the bugs related to replace: true (for example)

to workaround it, remove replace: true from your directive declaration and it shall work

for example:

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

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