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