Mouseenter 및 Mouseleave 용 AngularJS 사용자 지정 지시문

Question

내가 처음 생각한 해결책이 효과가 있었기 때문에 사용자 지정 지시문을 만들려고 노력했지만 지저분 해 보였습니다.

tr 요소에 마우스가있는 경우 연필 아이콘을 표시하고 마우스를 놓으면 연필 아이콘이 다시 숨겨집니다.

첫 번째 솔루션은 : 나는 ng-mouseenter 및 ng-mouseleave가 tr 요소를 어지럽히 듯 생각

<tr ng-mouseenter="hoverEdit = !hoverEdit" ng-mouseleave="hoverEdit = !hoverEdit" ng-repeat="user in users"> 
    <td>{{user.first_name}}</td> 
    <td>{{user.last_name}}</td> 
    <td>{{user.email}}</td> 
    <td><i ng-show="hoverEdit" class="fa fa-pencil"></i></td> 
    <td><button class="btn btn-danger" ng-click="delete(user)">Delete</button></td> 
</tr> 

(이 일을), 그래서이 지침을 만들려면 ... 여기에 내가

을 시도 것입니다

지침 솔루션 나는 문제가 난 그냥 hoverEdit을 참조 할 수 있다는 것입니다 생각, 그래서 N 해요

Users.directive('showpencilhover', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.on('mouseenter', function() { 
       hoverEdit == !hoverEdit 
      }); 

      element.on('mouseleave', function() { 
       hoverEdit == !hoverEdit 
      }); 
     } 
    } 
}); 

을 (작동하지 않습니다) 이 작업을 수행하는 방법을 확인하십시오. 어떤 조언을 주셔서 감사합니다! 당신이 할 수 물론

Answer 1

, 당신은 그냥 작동하지 않는 이유를 모르겠어요,

link: function(scope, element, attrs) { 
     element.on('mouseenter', function() { 
      scope.hoverEdit == !scope.hoverEdit 
     }); 

     element.on('mouseleave', function() { 
      scope.hoverEdit == !scope.hoverEdit 
     }); 
    }