Matthew Matthew - 1 year ago 174
AngularJS Question

custom-marker from ng-map with ng-repeat gives me $digest loop errors while still working properly

I currently use this to get custom markers on a map.

I got it working without errors on plunker, but not on my own site (even though I'm using the same script src links)

On my own page ng-repeat works, but it gives 2 very long errors informing me about a $digest loop

This is my list:

$scope.list = [{ name: 'test', pos: [41, -87] }, { name: 'test2', pos: [40, -86] }];

And this the HTML:

<ng-map zoom-to-include-markers="auto" style="height:200px;width:400px;">
<marker ng-repeat="item in list" position="{{item.pos}}"></marker>

The above doesn't give errors, but

<ng-map zoom-to-include-markers="auto" style="height:200px;width:400px;">
<custom-marker ng-repeat="item in list" position="{{item.pos}}">
<div style="background-color:white;border: 1px solid black;">this is a test</div>

does. It also gives me 2 extra errors everytime I add an item to the list, but it still works properly.

I have no idea why it works on plunker but not on my own site, I serve it using ASP.NET 5, using the same versions. On my own site also use ng-animate, ng-resource and a bunch of stuff that isn't angular related, but that shouldn't matter. (I hope)

Incase you need it, my controller is using these:

function ($scope, $rootScope, restData, NgMap) {

and app module is using this:

var app = angular.module('app', ['ngResource', 'ngMap'])

Answer Source

Fixed it myself.

I tried using this to solve my problem before I asked this question, but I probably forgot some part of it since it works the second time I tried it.

You need to use

$scope.positions = angular.copy(data) 

and bind on that seperate 'positions' variable and copy it if you want to rebind, you can't bind directly from the frontend on the data itself.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download