지시문에서 마우스 오버 시 클래스 변경

지시문에서 마우스 오버 시 클래스 변경

중첩된 지시문에 대해 클래스를 변경하는 방법을 찾는 데 어려움을 겪고 있습니다.

이것은 외부 ng-repeat 입니다.

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

아래는 다른 디렉티브를 사용하고 있는 내부 ng-repeat입니다.

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

다음은 호버 이벤트를 호출하는 지시어입니다.

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')호출 항목을 변경합니다.

일반적으로 Jason의 css 셀렉터 사용에 전적으로 동의하지만, 서드파티 css-template를 사용하는 경우 등 css를 변경하지 않고 요소에 대한 클래스를 추가/삭제하는 것을 선호할 수 있습니다.

다음 예시는 ng-mouseenter/mouseleave에서 클래스를 추가하거나 삭제하는 간단한 방법을 보여 줍니다.

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

호버링에서의 스타일링은 뷰의 문제입니다.위의 솔루션은 현재 범위에서 "호버" 속성을 설정하지만 컨트롤러는 이에 대해 걱정할 필요가 없습니다.

IE와 css:hover selector에 문제가 발생한 적이 있기 때문에 커스텀 디렉티브를 사용하는 접근방식을 취하고 있습니다.

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

그런 다음 마우스를 요소 위에 놓았을 때 활성화할 클래스 이름을 포함하는 지시문을 요소 자체에 추가할 수 있습니다. 예를 들어 다음과 같습니다.

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

마우스가 요소 위에 있고 범위 변수 이름 충돌 위험이 없을 때 클래스 호버 및 틴트가 추가됩니다.아직 테스트하지 않았지만 마우스 입력 및 마우스 탈퇴 이벤트가 포함된 요소까지 버블업되므로 주어진 시나리오에서는 다음 작업이 계속 작동합니다.

<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의 자녀라는 전제 하에

다음은 시나리오에 대한 솔루션입니다.

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

디폴트 상태:

호버:

제 생각엔 이걸 넣는 게 훨씬 쉬울 것 같아요.anchor을 따라다니다icss를 사용하면 됩니다.: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 예시

언급URL : https://stackoverflow.com/questions/16923111/change-class-on-mouseover-in-directive