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

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

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

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

Answer 2

实际上，我认为你的生活过于复杂。你可以使用内置指令和他正确的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

如何创建悬停指令

2 个答案: