Пример директивы angular

gistfile1.js

// это справочник в котором хранится самый сок социальных кнопок, это шаблоны кнопок и некоторые генераторы
var socialDictionary = {
    // vkontakte
    'mvVk': {
        template: '<a target="_blank" mv-button-link ' +
            'class="mv-vk mv-icon-social-vk-dark no-title" ' +
            'href="http://vk.com/share.php?url={{url}}&title={{title}}">' +
            '</a>'
    },
    // facebook
    'mvFb': {
        template: '<a target="_blank" mv-button-link ' +
            'class="mv-fb mv-icon-social-facebook-dark no-title" ' +
            'href="http://www.facebook.com/sharer.php?u={{url}}&t={{title}}">' +
            '<span class="icon"></span> ' +
            '</a>'
    },
    //google+
    'mvGp': {
        template: '<a target="_blank" mv-button-link ' +
            'class="mv-gp mv-icon-social-google-dark no-title" ' +
            'href="https://plus.google.com/share?hl={{language}}&url={{url}}">' +
            '</a>'
    },
    // первым трем ( vk, fb, gp ) дескрипшон особо то и не нужен они сами его с сайта заберут из метатегов

    // twitter
    'mvTw': {
        template: '<a  target="_blank" mv-button-link ' +
            'class="mv-tw mv-icon-social-twitter-dark no-title" ' +
            'href="http://twitter.com/share?url={{url}}&text={{title}}&via=coolWidget:p">' +
            '</a>'
    },

    // тумблер
    'mvTb': {
        template: '<a  target="_blank" mv-button-link ' +
            'class="mv-tb mv-icon-social-tumblr-dark no-title" ' +
            'href="http://www.tumblr.com/share/link?url={{url}}&name={{title}}&description={{description}}">' +
            '</a>',
        genDescription: function (descr, img) {
            var text = '<img src="' + img + '"><br>' + descr;
            return encodeURIComponent(text); // так надо
        }
    },

    // liveJournal
    'mvLj': {
        template: '<a target="_blank"  class="mv-lj" href="http://www.livejournal.com/update.bml?event={{description}}&subject={{title}}"></a>',
        genDescription: function (descr, img, url) {
            var text = '<img src="' + img + '"><br>' + descr + ' <a href="' + url + '">' + url + '</a>';
            return encodeURIComponent(text);
        }
    },

    // blogger
    'mvBg': {
        template: '<a target="_blank" mv-button-link ' +
            'class="mv-bg mv-icon-social-blogger-dark no-title" ' +
            'href="http://www.blogger.com/blog-this.g?t={{description}}&u={{url}}&n={{title}}">' +
            '</a>',
        genDescription: function (descr, img) {
            var text = '<img src="' + img + '"><br>' + descr;
            return encodeURIComponent(text);
        }
    }
};

angular.module('MV.ui')
    .directive('mvSocialButtons', function () {
        return {

            // тип преобразования element ( фигачим прямо теги )
            restrict: 'A',

            // все что было внутри нашего элемента надо перенести в место
            // помеченное ng-transclude (будет чуть дальше в шаблоне)
            transclude: true,

            // создавать ли свой скоп для элемента,
            // думаю что лишним не будет хотя в нашем случае это не важно
            scope: {
                img: '=',
                url: '='
            },

            // собственно конструктор контроллера
            // первый элемент массива это название зависимости которая нам нужна для конструктора
            controller: ['$element', '$scope', function ($element, $scope) {

                // все атрибуты достаем руками, можно и через scope
                // но они поступят после вызова конструктора а нам так не надо
                var url = $scope.url,//$element.attr('url'),
                    img = $scope.img, //$element.attr('img'),
                    title = $element.attr('sb-title') || '',
                    description = $element.attr('description') || '';

                // этот метод проставляет подчиненной кнопке соотвествующие свойства
                this.setButton = function (button, nm) {

                    // если у нас есть генератор дескрипшонов то воспользуемся им
                    var descriptionGenerator = socialDictionary[nm].genDescription;
                    if (descriptionGenerator) {
                        button.description = descriptionGenerator(description, img, url, title);
                    } else {
                        button.description = encodeURIComponent(description);
                    }

                    button.url = encodeURIComponent(url);
                    button.img = encodeURIComponent(img);
                    button.title = encodeURIComponent(title);
                };
            }],
            template: // ng-transclude отвечает за то,
            // чтобы при первом преобразовании тега social-buttons
            // его дочерние элементы не потерялись, а были вставленны внутрь
            // сгенерированной замены
                '<div class="mv-social-buttons" ng-transclude></div>',
            replace: true
        };
    });


// функция генерит функцию которая делает кнопку O_o ( вот за это я люблю js )
var makeSocialButton = function (nm) {
    // тут у нас все в общем виде
    return function () {
        return {
            // родительский элемент должен быть <social-buttons>
            require: '^mvSocialButtons',
            restrict: 'A',
            priority: 1000,
            scope: {},
            // этот метод будет вызываться автоматически для связывания дочернего и родительского элемента
            link: function (scope, e, a, socialButtonsCtrl) {
                // у нас есть кнопка но она понятия не имеет какие данные нам шарить
                // зато этими данными владеет родительский элемент (social-buttons)
                // попросим его поделится ими
                // scope - это какбы "наш контроллер" он же является наблюдаемым объектом
                // при назначении ему свойств будет оказано влияние на отображение
                socialButtonsCtrl.setButton(scope, nm);
            },
            template: socialDictionary[nm].template
        };
    };
};

// циклом по нашему справочнику генерим кнопки и закрепляем из за одноименными тегами
for (var nm in socialDictionary) {
    if (socialDictionary.hasOwnProperty(nm)) {
        angular.module('MV.ui').directive(nm, makeSocialButton(nm));
    }
}