Within a single view, I have multiple instances of repeated content elements. Each content element contains an anchor element. My goal is to toggle a class on a sibling element within that specific content element when a user hovers over the anchor.
For clarity, here's a basic example of what I'm trying to achieve:
<div class="content-element">
<div ng-class="visibleClass">
When the user hovers over the link inside this content-element, I want it to have the 'visible' class.
</div>
<a ng-mouseover="" ng-mouseleave="" href="#">Mouseover</a>
</div>
My initial approach involved creating a controller to manage this behavior. However, I realized that the $scope of the controller is connected to the entire view rather than a specific content-element, making it less than ideal.
While many 'content-elements' are not dynamically generated with Angular, they are simply repeated in the template.
As a newcomer to Angular, I'm navigating this new paradigm. I can easily address this issue using traditional JavaScript techniques (event capturing, targeting elements, accessing siblings, etc.), but I recognize that this may not align with Angular best practices.
Given this context, what is the recommended Angular approach for achieving this functionality? Would implementing a custom directive be the appropriate solution?