javascript - 如何创建悬停指令

Question

我正在尝试制作一个简单的悬停指令，如何保留我的“$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>

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

Controller

$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