ディレクティブ内のマウスオーバー時にクラスを変更する

Question

ネストされたディレクティブでクラスを変更する方法を理解するのに問題があります。

これは、ディレクティブイムホバーイベント

を要求している他のディレクティブここで

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

を使用しているインナーngのリピート外ngのリピート以下

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

されています

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

は、私はi周りanchorタグを配置する方がはるかに簡単になると思います。 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

例えば、私は完全にCSSセレクタのジェイソンの使用に同意するが、いくつかのケースでは、あなたがCSSを変更したくない場合があります。

これは、トリックを行いますサードパーティ製のCSSテンプレートを使用する場合は、要素にクラスを追加/削除することをお勧めします。いくつかのスタイルで

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

：

次のサンプルでは、​​NG-のMouseEnter/mouseleaveにクラスを追加/削除する簡単な方法を示して

.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); 
      }); 
     } 
    }; 
}) 

は、その要素自体に、あなたはマウスが上例えば要素である場合に有効たいクラス名とディレクティブを追加することができますマウスが要素の上にあり、スコープ変数名の衝突の危険性を実行していないときには色合いが変わります。以下は、まだ李さんは、親のdiv

のInfactは子供であることを当然の提供

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

を動作するはず与えられたシナリオにおけるように、私がテストしていないが、含んでいる要素までのMouseEnterとmouseleaveのイベントがなければならない、まだバブル