Question

我有两条指令：

<wa-svg ng-repeat="page in Pages" ng-mouseover="showTooltip($index)>

<wa-tooltip ng-repeat="page in Pages" ng-class="{on: matchedIndex}">

问题：

在特定wa-svg的鼠标悬停时，如何匹配$index的{{1}}以使wa-svg的{{1}}返回true。因此，matchedIndex的类会附加到wa-tooltip

我认为它需要一个孤立的范围，或者可能通过on，但这是令人困惑的。

注意：我无法嵌套这些元素，因为wa-svg是一个svg对象，除非使用foreignObject和blah blah blah，否则你不能很好地嵌套。

Answer 1

那么共享控制器怎么样？

具有此功能的包装器控制器：

  $scope.showTooltip= function($index) {
       $scope.hoveredIndex = $index;
  }

在你的工具提示指令中执行：

  <wa-tooltip ng-repeat="page in pages" ng-class="{on: $index === hoveredIndex}">

这对你有用吗？

Answer 2

这应该有效：

<div ng-init="hovered = {}">
  <wa-svg ng-repeat="page in Pages" ng-mouseover="hovered.index = $index" />
  <wa-tooltip ng-repeat="page in Pages" ng-class="{on: hovered.index == $index}" />
</div>

总结：将鼠标悬停在wa-svg上会设置hovered.index，wa-tooltip可以访问hovered = {}。

{{1}}部分的唯一原因是因为转发器创建了新的作用域，所以我在新作用域之外创建了一个对象，以便可以从两个转发器访问索引。您可以/应该将该语句放入控制器中。

在Angular中，在两个不同的指令之间传递匹配的$索引

2 个答案: