Question

我在一个视图中有很多重复的内容元素。在每个内容元素中，都有一个锚点。当用户将鼠标悬停在此锚点上时，我想在该特定内容元素中的兄弟元素上切换类。

以下是我想要做的一个简单示例：

<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>

我最初编写了一个控制器来处理这个问题，但控制器的$ scope与整个视图相关联，而不是单个内容元素，因此结果不是一个优雅的解决方案。

有很多'内容元素'不是用角度生成的，而只是在模板中重复。

我对角度很新，并试图围绕这种新的思维方式。我绝对可以轻松地解决这个问题，一些javascript（捕获事件，获取目标，获取兄弟等），但这似乎不是用角度来做的正确方法。

那么......这样做的角度方法是什么？我应该写一个自定义指令吗？

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，则会自动创建隔离范围，并且您不需要该指令。

Answer 2

在mouseover事件中创建元素的兄弟姐妹的指令。你可以用兄弟姐妹做你想做的事情：

app.directive('mousiee',function(){
  return{
    restrict: 'A',
    link: function(scope,elem,attrs){
      var siblings;
      elem.on('mouseover',function(){
        siblings = $(elem.parent()).siblings();
        console.log(siblings);
      });
    }
  };

});

http://plnkr.co/edit/gWkNpiHMUEUBwuug9C3q?p=preview

（请注意，我已将jQuery添加到您的index.html）

使用angular显示鼠标悬停时的兄弟元素

2 个答案: