javascript - 使用 Angular 在鼠标悬停时显示兄弟元素

Question

我在一个 View 中有很多重复的内容元素。在每个内容元素中，都有一个 anchor 。当用户将鼠标悬停在该 anchor 上时，我想在该特定内容元素内的同级元素上切换类。

这是我想做的一个简单示例:

<div class="content-element">
  <div ng-class="visibleClass">
    I should have class 'visible' when the user mouses over the link within content-element div.
  </div>
  <a ng-mouseover="" ng-mouseleave="" href="#">Mouseover</a>
</div>

我最初写了一个 Controller 来处理这个问题，但是 Controller 的 $scope 绑定(bind)到整个 View ，而不是单个内容元素，所以这不是一个优雅的解决方案。

有许多“内容元素”不是用 Angular 生成的，而是在模板中重复出现的。

我对 Angular 还很陌生，并试图围绕这种新的思维方式思考。我绝对可以轻松地编写一些 javascript(捕获事件、获取目标、获取同级等)来解决这个问题，但这似乎不是使用 angular 来完成此操作的正确方法。

那么...执行此操作的适当 Angular 方法是什么？我应该编写自定义指令吗？

Answer 1

只需创建一个具有新作用域的指令，并在 HTML 中包含如下内容:

<div class="content-item">
  <div class="" ng-class="{someClass:hovered}">My transparency should change.</div>
  <a ng-mouseover="hovered = true">Mouseover me.</a>
</div>

PLUNKER

请注意，如果您使用 ngRepeat，它会自动创建隔离范围，您不需要该指令。