Within my application, I retrieve a list of objects from the server. These objects are then displayed on a left sidebar as a list and on a map (leaflet) as markers on the same page. The markers/map are rendered through a service, while the sidebar list is handled by a controller and simple view.
Whenever a user clicks on an item in the list or a marker on the map, I trigger a broadcast event from $rootScope.
Clicking on a sidebar item initiates the following code:
// in view
<div ng-click="markerClicked(object)">...</div>
// in controller
$scope.markerClicked = function(object) {
$rootScope.$broadcast('markerClicked', object);
};
Clicking on a marker triggers this code:
angular.forEach(markers, function(object) {
var _marker = L.marker([object.longitude, object.latitude],{
clickable: true
});
_marker.on('click', function(e) {
$rootScope.$broadcast('markerClicked', object)
});
_marker.addTo(service.map);
service.layer.addLayer(_marker);
});
I handle this event within only one controller:
// I also tried $rootScope.$on()
$scope.$on('markerClicked', function(event, object) {
$scope.object = object;
$scope.hidden = false;
console.log('event fires');
});
$scope.hidden serves as a flag for conditionally rendering the modal window (popup).
The issue arises when clicking on a marker - although 'event fires' is logged in the console and $scope.hidden is set to false, the modal window fails to appear. However, it works as expected when clicking on a sidebar item.
If anyone has encountered a similar problem, please advise on what might be going wrong.
I am utilizing webpack in the project, which may potentially be a factor affecting the functionality.