Custom Directives

angular.module('directivesApp', [])
.directive('highlight', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('mouseenter', function() {
        element.css('background', 'yellow');
      });
      element.on('mouseleave', function() {
        element.css('background', '');
      });
    }
  };
})
.directive('userInfo', function() {
  return {
    restrict: 'E',
    scope: { name: '@', age: '=' },
    template: '<div class="user"><b>{{ name }}</b> ({{ age }})</div>'
  };
});

<!-- Usage -->
<div highlight>Hover me</div>
<user-info name="Alice" age="30"></user-info>
<user-info name="Bob" age="{{ 25 }}"></user-info>