如何創建懸停指令

我試圖做一個簡單的懸停指令，我怎麼堅持我的「$ 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

來源

2014-02-26 Rodrigo Fonseca

我不知道我的理解 - 什麼是你正在試圖解決這個問題？ –

，當你在一個裏點擊，它接受一個類（活動），但在此之後，當你在一個地點擊，李前必須刪除類（有源）和電流I接收類（活動），但是這是不會發生什麼。 –

因此，您希望鼠標懸停時項目變爲紅色，並在鼠標懸停時恢復正常。如果你點擊任何一個項目，它會保持紅色，直到你點擊另一個項目，那麼這個應該恢復正常，其他應該變成紅色。它是否正確？ –

其實，我覺得你過於複雜你的生活在這裏。你可以通過使用內置的指令和他正確的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

來源

2014-02-26 16:59:17 NicolasMoise

ty upvoting /接受我的答案，如果它幫助 – NicolasMoise

生活和學習，非常好！謝謝。 –

好一個大問題喲你得使用三個單獨的指令，每個指令都有自己的隔離範圍。你的指令無法相互溝通。 $scope.selected每個都不相同。

我的建議是創建一個指令，創建您的ul和li，這樣您就可以處理一個存儲所選值的範圍。

另一種方法是存儲$scope.selected父控制器內，並在指令中使用scope: {selected: "="}。

來源

2014-02-26 15:52:15 NicolasMoise

請參閱我的http://plnkr.co/edit/4aPxfSM1g9T8Ao1GhxTA?p=preview，如何將我用我的父控制器？ –

這是一個父指令，而不是控制器。見http://plnkr.co/edit/8DiJn8PC8tKnTfaMgNLy?p=preview邏輯仍然需要得到明顯改善，但至少你有一個選擇。 – NicolasMoise

另外，爲什麼不只是附加一個懸停CSS類，不需要在這裏做角度，特別是因爲你的邏輯沒有真正的工作。（'$範圍。選擇'只能保存1個值，但你可能需要更多的一個項目被選中一次，這是行不通的） – NicolasMoise

如何創建懸停指令

回答

相關問題