var app = angular.module('app', []); app.controller('appController', function ($scope) { }); app.directive('enter', function () { return { restrict: 'A', link: function(scope, element){ element.bind('mouseenter', function() { element.html('mouseenter'); }) } }; }); app.directive('leave', function () { return { restrict: 'A', link: function(scope, element, atts){ element.bind('mouseleave', function() { element.html(atts.leave); }) } }; });
<section ng-app="app" class="container"> <section ng-controller="appController"> <div class="target" enter leave="good bye">hover over me</div> </section> </section>
.target { width: 100px; height: 100px; border-radius: 5%; margin: 30px; padding: 20px; background: #00a; text-align: center; color: #fff; }