Javascript 如何创建悬停指令

我正在尝试创建一个简单的hover指令，如何持久化我的“$scope.selected”变量？因为，当我点击一个链接，然后点击另一个链接时，之前的链接仍然标记为。。。我看过很多关于这方面的帖子，但没有一篇使用“部分”或指令

我的html：

    <nav>
      <ul>
        <rf-hover rf-on-hover-class="hover" rf-on-hover-index="0" ng-transclude>Home</rf-hover>
        <rf-hover rf-on-hover-class="hover" rf-on-hover-index="1" ng-transclude>About us</rf-hover>
        <rf-hover rf-on-hover-class="hover" rf-on-hover-index="2" ng-transclude>Contact</rf-hover>
      </ul>
    </nav>

我的部分html元素：

<li ng-mouseover='mouseover()' ng-mouseleave="mouseleave()" ng-click="mouseclick()"
ng-class="{active : isSelected()}"></li>

---

还有一个大问题是，您正在使用三个单独的指令，每个指令都有各自的隔离作用域。您的指令无法相互通信。所选的

$scope.selected

对于每种类型都是不同的

我的建议是使用

ul

和

li

创建一个指令，这样您就可以处理一个存储所选值的范围

---

另一种方法是将

$scope.selected

存储在父控制器中，并在指令中使用

scope:{selected:=“}

。

您遇到的一个大问题是，您使用了三个单独的指令，每个指令都有各自的隔离作用域。您的指令无法相互通信。所选的

$scope.selected

对于每种类型都是不同的

我的建议是使用

ul

和

li

创建一个指令，这样您就可以处理一个存储所选值的范围

---

另一种方法是将

$scope.selected

存储在父控制器中，并在指令中使用

scope:{selected:=“}

。

事实上，我认为您在这里的生活过于复杂了。通过使用内置指令和正确的CSS，您可以实现您想要的。无需构建自己的指令

HTML

<ul>
    <li ng-click="select.i=link" ng-repeat="link in links" ng-class="{active: select.i===link}">{{link}}</li>
</ul>

注意：

$scope.select

是一个对象，以确保其通过引用传递

CSS

li {
   cursor: pointer; 
}

li.active, li:hover{
  color: red;
}

---

看

事实上，我认为你把这里的生活复杂化了。通过使用内置指令和正确的CSS，您可以实现您想要的。无需构建自己的指令

HTML

<ul>
    <li ng-click="select.i=link" ng-repeat="link in links" ng-class="{active: select.i===link}">{{link}}</li>
</ul>

注意：

$scope.select

是一个对象，以确保其通过引用传递

CSS

li {
   cursor: pointer; 
}

li.active, li:hover{
  color: red;
}

---

请参见

我不确定我是否理解-您试图解决的问题是什么？当您单击一个li时，它将接收一个类（活动），但在此之后，当您单击另一个li时，前面的li必须删除该类（活动），当前li将接收该类（活动），但事实并非如此。因此，您希望项目在鼠标悬停时变为红色，并在鼠标悬停时恢复正常。如果你点击任何一个项目，它会一直保持红色直到你点击另一个项目，那么这个项目会恢复正常，另一个项目会变成红色。这是正确的吗？是的，伊戈尔，你是正确的！并更好地理解此范围的工作原理…我不确定我是否理解-您试图解决的问题是什么？当您单击一个li时，它将接收一个类（活动），但在此之后，当您单击另一个li时，之前的li必须删除该类（活动），当前li将接收该类（活动），但事实并非如此。因此，您希望项目在鼠标悬停时变为红色，并在鼠标悬停时恢复正常。如果你点击任何一个项目，它会一直保持红色直到你点击另一个项目，那么这个项目会恢复正常，另一个项目会变成红色。这是正确的吗？是的，伊戈尔，你是正确的！更好地理解这个作用域是如何工作的……请看我的，我将如何使用我的父控制器？这是一个父指令，而不是控制器。看，逻辑仍然需要改进，但至少你已经选择了一个。另外，为什么不只是附加一个hover CSS类，这里不需要做任何调整，特别是因为你的逻辑没有真正工作。（

$scope.selected

只能保存1个值，但您可能希望一次选择多个项目，但这不起作用）它现在起作用了：，我不能只在css中使用鼠标悬停，因为它比只使用它更复杂。由您决定如何组织代码，但我的解决方案的代码要少得多。请参阅我的，如何使用父控制器？这是父指令，不是控制器。看，逻辑仍然需要改进，但至少你已经选择了一个。另外，为什么不只是附加一个hover CSS类，这里不需要做任何调整，特别是因为你的逻辑没有真正工作。（

$scope.selected

只能保存1个值，但您可能希望一次选择多个项目，但这不起作用）它现在起作用了：，我不能只在css中使用鼠标悬停，因为它比只使用它更复杂。由您决定如何组织代码，但我的解决方案的代码要少得多。