在指令中更改鼠標懸停的類

Question

我在解決如何讓一個類在嵌套指令上發生更改時遇到了問題。

這是外NG-重複

<div data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" 
     data-ng-controller ="CourseItemController" 
     data-ng-class="{ selected: isSelected }"> 

下面是內NG-重複其使用另一個指令

    <li data-ng-repeat="item in social" class="social-{{item.name}}" ng-mouseover="hoverItem(true);" 
       ng-mouseout="hoverItem(false);" 
       index="{{$index}}"><i class="{{item.icon}}" 
       box="course-{{$index}}"></i></li> 

這裏是指示IM呼籲懸停事件

ecourseApp.directive("courseoverview", function() { 
    return {  
    restrict : 'A',  
    replace: true, 
    /*scope: { 
     index: '@' 
    },*/   
    transclude: true,  
    templateUrl: "views/course-overview.html", 
    link: function link(scope, element, attrs) { 
     scope.switched = false; 
     //hover handler 
     scope.hoverItem = function(hovered){ 
      if (hovered) { 
       element.addClass('hover'); 
       $('#course-0 figure').addClass('tint') 
      } 
      else 
       element.removeClass('hover'); 
     }; 
    } 
}}); 

這需要$('#course-0 figure').addClass('tint')來更改通話項目。

感謝

Answer 1

我認爲這將是更容易把一個anchor標籤周圍i。您可以使用css :hover選擇器。更少的移動部件使得維護更容易，並且加載更少的JavaScript使得頁面更快。

這將這樣的伎倆：

<style> 
a.icon-link:hover { 
    background-color: pink; 
} 
</style> 

<a href="#" class="icon-link" id="course-0"><i class="icon-thumbsup"></id></a> 

jsfiddle example

Answer 2

總的來說，我與Jason的使用CSS選擇器的完全同意，但在某些情況下，你可能不希望更改CSS，例如當使用第三方CSS模板時，寧願在元素上添加/刪除類。

下面的示例示出了添加/移除上NG-的mouseenter /鼠標離開一個類的一個簡單的方法：

<div ng-app> 
    <div 
    class="italic" 
    ng-class="{red: hover}" 
    ng-init="hover = false" 
    ng-mouseenter="hover = true" 
    ng-mouseleave="hover = false"> 
     Test 1 2 3. 
    </div> 
</div> 

一些造型：

.red { 
    background-color: red; 
} 

.italic { 
    font-style: italic; 
    color: black; 
} 

參見運行示例這裏：jsfiddle sample

懸停時的造型是一個值得關注的問題。儘管上面的解決方案在當前範圍中設置了「懸停」屬性，但控制器不需要擔心這一點。

Answer 3

這是我對我的情況的解決方案：

<div class="btn-group btn-group-justified"> 
    <a class="btn btn-default" ng-class="{'btn-success': hover.left, 'btn-danger': hover.right}" ng-click="setMatch(-1)" role="button" ng-mouseenter="hover.left = true;" ng-mouseleave="hover.left = false;"> 
     <i class="fa fa-thumbs-o-up fa-5x pull-left" ng-class="{'fa-rotate-90': !hover.left && !hover.right, 'fa-flip-vertical': hover.right}"></i> 
     {{ song.name }} 
    </a> 
    <a class="btn btn-default" ng-class="{'btn-success': hover.right, 'btn-danger': hover.left}" ng-click="setMatch(1)" role="button" ng-mouseenter="hover.right = true;" ng-mouseleave="hover.right = false;"> 
     <i class="fa fa-thumbs-o-up fa-5x pull-right" ng-class="{'fa-rotate-270': !hover.left && !hover.right, 'fa-flip-vertical': hover.left}"></i> 
     {{ match.name }} 
    </a> 
</div> 

默認狀態：

懸停：

Answer 4

我遇到了與IE和CSS在過去的問題：懸停選擇器，所以我採取的方法是使用自定義指令。

<li data-ng-repeat="item in social" hover-class="hover tint" class="social-{{item.name}}" ng-mouseover="hoverItem(true);" ng-mouseout="hoverItem(false);" 
       index="{{$index}}"><i class="{{item.icon}}" 
       box="course-{{$index}}"></i></li> 

這應該添加類懸停和：

.directive('hoverClass', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      hoverClass: '@' 
     }, 
     link: function (scope, element) { 
      element.on('mouseenter', function() { 
       element.addClass(scope.hoverClass); 
      }); 
      element.on('mouseleave', function() { 
       element.removeClass(scope.hoverClass); 
      }); 
     } 
    }; 
}) 

然後元素本身，你可以用你想啓用當鼠標移動到例如元素的類名稱添加指令當鼠標懸停在元素上並且沒有運行範圍變量名稱衝突的風險時的色調。我沒有測試過，但的mouseenter和鼠標離開事件應該還是冒泡到包含元素，以便在給定的情況下應該仍然工作

<div hover-class="hover" data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" 
data-ng-controller ="CourseItemController" 
data-ng-class="{ selected: isSelected }"> 

當然提供的李時珍是父DIV

的INFACT兒童