componentizacao.html

<html xmlns="http://www.w3.org/1999/html">
<head>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet">
    <script>
        angular.module('myApp', [])
                .directive('minhaDiretiva', function () {
                    return {
                        template: '<div>' +
                                '<p>Valor veio de atributo: {{valorViaAtributo}} </p>' +
                                '<p>Valor vindo de escopo: {{valorDoEscopo}}</p>' +
                                '</div>',
                        restrict: 'EA',
                        link: function (scope, element, attrs) {
                            element.bind('mouseenter', function () {
                                element.css('background', '#FF2213');
                            });
                            element.bind('mouseleave', function () {
                                element.css('background', '#AAAAAA');
                            })
                        },
                        scope: {
                            valorViaAtributo: '@valorViaAtributo',
                            valorDoEscopo: '=valorDoEscopo'
                        }
                    }
                })
    </script>
</head>
<body ng-app="myApp" ng-init="valor = 'Valor no Escopo'">
    <div minha-diretiva
         valor-via-atributo="Valor Via Atributo"
         valor-do-escopo="valor">
    </div>
</body>
</html>