I have a unique dart and event with their own ids created in separate controllers. My goal is to create a functionality where hovering over the dart highlights the corresponding event with the same id, and vice versa. The events are displayed on the image's right side with labels like shiftstart, BRK, etc. To achieve this, I've implemented code that broadcasts the id from the dart controller to the event schedule controller:
Dart controller:
$scope.clicker = function(id)
{
$rootScope.$broadcast("id changed", id);
}
Event controller:
$scope.$on("id changed", function(event, id)
{
for(let i = 0; i < $ctrl.adherence.events.length; i++){
if($ctrl.adherence.events[i].id == id)
console.log("id in on: " + $ctrl.adherence.events[i].id + " other id
is " + id);
}
});
Here is my ng-mouseenter in my html for the dart:
(
<img src="${getDartImage(event)}" ng-mouseenter="clicker(${event.id})" class="dart">And my ng-mouseenter for my event schedule:
<scheduled-event
event="event"
ng-repeat="event in $ctrl.adherence.events"
ng-mouseenter="$ctrl.clicker1($ctrl.adherence.events[$index].id)">
</scheduled-event>
While I can successfully match the ids and log them, I'm unsure of how to change the CSS styling of the dart by clicking on the event and vice versa.