I have a page with a MapBox map showing some markers, and a panel showing some info for each marker. To do that, I add the markers in an array called markers
owned by the controller ctrl
.
map.featureLayer.on('layeradd', function(e)
{
var marker = e.layer;
//add marker to the list
ctrl.markers.push(marker);
});
Then, in my html panel, I have something like
<div ng-repeat="marker in ctrl.getMarkers()">
{{marker.name}}
</div>
It works, but when I set the markers with map.setGeoJSON(x)
, it fires the event on('layeradd')
for each marker added. Each one of them automatically fires a $scope.$digest
. Is there a way to suspend watching the array markers
, add all the markers, and then resume it?
I tried this solution (from codewall), but it doesn't work
$rootScope.$on('suspend', function ()
{
watchers = $rootScope.$$watchers;
$rootScope.$$watchers = [];
});
$rootScope.$on('resume', function ()
{
if (watchers)
$rootScope.$$watchers = watchers;
// discard our copy of the watchers
watchers = void 0;
});
.....
$rootScope.$broadcast('suspend');
map.setGeoJSON(x);
$rootScope.$broadcast('resume');
[UPDATE 1]
as @YOU suggested, I tried to use a temp_array to make modifications. So now ng-repeat
watches ctrl.markers
, but I add and remove items to ctrl.temp_markers
. When I've finished the update, I do ctrl.markers=ctrl.temp_markers.slice(0)
.
Even in this way, I see that the digest cycle is applied for every item in the array :(