如何创建悬停指令

Question

我正在尝试制作一个简单的悬停指令，如何保留我的"$scope.selected"变量？因为，当我点击一个链接，然后单击另一个链接时，之前的链接仍然标记......我看过许多其他关于此的帖子，但没有一个使用"部分"或指令。

我的网页：

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

我的 AngularJS 指令：

app.directive('rfHover', function () {
    return {
        restrict: 'E',
        scope: {
          onHoverClass: '@rfOnHoverClass',
          index: '@rfOnHoverIndex'
        },
        replace: true,
        transclude: true,
        templateUrl: "partial.html",
        controller: function ($scope) {
            $scope.selected = null;
            $scope.clicked  = false;
            $scope.mouseover = function () {
              $scope.selected = $scope.index;
            };
            $scope.mouseleave = function () {
              if($scope.clicked !== $scope.index) {
                $scope.selected = false;
              }
            }
            $scope.mouseclick = function () {
              $scope.selected = $scope.index;
              $scope.clicked  = $scope.index;
            }
            $scope.isSelected = function () {
                return  $scope.selected === $scope.index 
            };
        }
    };
});

我的部分 HTML 元素：

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

和 plnkr.co

Answer 1

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

.HTML

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

控制器

$scope.links=["Home", "About", "Contact Us"];
$scope.select={};

注意：$scope.select是一个对象，以确保其通过引用传递。

.CSS

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

见 http://plnkr.co/edit/mIcrzJv2qjjaTFCNNMDK?p=preview

Answer 2

您遇到的一个大问题是您使用了三个单独的指令，每个指令都有自己的隔离作用域。您的指令无法相互通信。每个$scope.selected都不同。

我的建议是用创建你的ul来创建一个指令li这样你就可以处理一个存储所选值的范围。

另一种方法是将$scope.selected存储在父控制器中，并在指令中使用scope: {selected: "="}。