Custom marker ng-repeat not updating when changes made to model

[harryj]

So I'm using custom marker in ng-repeat like so:

<map zoom="11" center="[41.8369, -87.6847]" id="map-view-map">
    <custom-marker ng-repeat="clip in clips | filter:{clip_type:3}" position="[{{clip.lat}},{{clip.lng}}]" on-mouseover="markerMouseOver(clip)" on-mouseout="markerMouseOut(clip)">
        <div class='clip-marker'>{{clip.name}}</div>
    </custom-marker>
  </map>

I want to change something in the custom marker on mouseover/mouseout so to test I have something like this in my controller:

$scope.markerMouseOver = function(clip){

   clip.name = "NEWNAME";
};

But the markers don't update. I've tried other changes (such as modifying the lat/lng) and the markers/map don't automatically update. I know this functionality exists for regular markers (testapp example marker_dynamic_ng_repeat.html but it doesn't seem to be working for custom-markers? Or am is it supposed to and I'm just doing something wrong?

Thanks so much for building this by the way, it's super awesome!

[allenhwkim]

No, you are nothing doing it wrong.

As yo see in the code, there is no watcher set for the contents. Thus, every thing is one-way binding, not two-way.

I like it to have two-way binding, but I do not have a clean solution. Only way I can think of as a solution is to pass a variable name to watch, then update the contents. e.g., <custom-marker watch="myVar">

I need assurance of this solution from me or anyone.

[harryj]

So I added a variable to the custom marker element like so (called clip-to-watch)

<custom-marker ng-repeat="clip in clips | filter:{clip_type:3}"  clip-to-watch="clip" position="[{{clip.lat}},{{clip.lng}}]" on-mouseover="markerMouseOver(clip)" on-mouseout="markerMouseOut(clip)">
     <div class='clip-marker'>{{clip.name}}</div>
</custom-marker>

And changed custom-marker js to watch it.

  link: function(scope, element, attrs, mapController) {

        var orgAttrs = parser.orgAttributes(element);
        var filtered = parser.filter(attrs);
        var options = parser.getOptions(filtered, scope);
        var events = parser.getEvents(scope, filtered);


        scope.$watch(attrs.clipToWatch,function(val){
          console.log('clip to watch observe triggered');
        });

        /**
         * build a custom marker element
         */
        var removedEl = element[0].parentElement.removeChild(element[0]);
        void 0;
        var customMarker = new CustomMarker(options);

When the markers are initially loaded the watch triggers and I see the console logs but whenever I update the clip model, the watch no longer triggers.

Any idea why that would be happening?

On a side note, when any elements are removed or added from the clips array correctly adds or deletes the marker, it's just when an existing clip is modified the marker isn't updated. Any help would be great thanks!

[harryj]

Oh I think I figured it out. I had to set the third parameter of $watch to be true like so:

scope.$watch(attrs.clipToWatch,function(val){
          console.log('clip to watch observe triggered');
        }, true);

So now that I can detect when an update to the data has happened, how do I re-render the custom marker html with the new data in the scope?

Like is there a way to 'reset' or 'rerun' the directive? Or maybe to destroy it and re-initialize it?

[harryj]

So I was able to do this to update the custom marker content when the clip was updated.

scope.$watch(attrs.clipToWatch,function(val){
          console.log(element[0].innerHTML);
          customMarker.setContent(element[0].innerHTML);
}, true);

I think I would need to reset the position as well if the lat/lng changed. I will try to do that and report back

[harryj]

So I was able to finish everything as follows:

scope.$watch(attrs.clipToWatch,function(val){
          customMarker.setContent(element[0].innerHTML);
          var latLng = new google.maps.LatLng(val.lat, val.lng);
          customMarker.setPosition(latLng);
 }, true);

Which I believe finishes the two way data binding. If any elements are removed or added to the clips array, marker will be removed or added. If any element is updated, the marker will update as well.

[allenhwkim]

Thanks for your code. If it looks good for you, could you send me a pull request? If it is only about position, you can simply use position attribute without using a watcher. e.g., position="{{pos.lat}}, {{pos.lng}}". This also applies to 'z-index' and 'visible'

[allenhwkim]

Here is my thought on this two-way binding matter for custom-marker.

1. Collect all two-way binding variables from custom-marker html. e.g. {{foo}}, {{bar}}. but not {{::foo}}, {{::bar}}

2. Watch those variables, then when those are changed, recompile html, then run setContents

   $scope.$watch('[foo,bar]', function () { ... }, true);
   

Feedbacks are welcomed.