javascript - AngularJS custom directive for mouseenter and mouseleave -

javascript - AngularJS custom directive for mouseenter and mouseleave -

i trying create custom directive because first solution came worked, seemed messy.

when tr element has mouseenter want show pencil icon, , when mouseleave occurs pencil icon should hide again.

first solution: (this worked)

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

i thought ng-mouseenter , ng-mouseleave seemed clutter tr element, want create directive...here tried

directive solution (doesn't work)

users.directive('showpencilhover', function() { homecoming { restrict: 'a', link: function(scope, element, attrs) { element.on('mouseenter', function() { hoveredit == !hoveredit }); element.on('mouseleave', function() { hoveredit == !hoveredit }); } } });

i believe problem can't reference hoveredit, i'm not sure how create work. advice!

sure can, have preface scope (notice how scope injected in link function)

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

javascript angularjs angularjs-directive