Директивы в Angularjs для начинающих. Часть 1

Мне очень нравится модульность Angular'a. В рамках же single-page приложения очень хочется избежать постоянной подгрузки темплейтов с сервера. А ввиду большого количества темплейтов, крайне не хочется хранить все темплейты в одной куче в рутовом index.html, а перенести их в конкретные модули. С простыми темплейтами нет проблем, но как всегда хочется большего. Нужна интернализация, автоматическая подстановка значений из разных scope'ов, быстрая динамическая перестройка html. Первого в angular'е нет, но можно самому написать через директивы; подстановка работает с некоторыми ограничениями; а вот динамически менять dom достаточно муторно. По сути, нужно каждый раз компилировать темплейты, чтобы работали подстановки и выполнялись директивы. Наверно тут нужно определенное мастерство, т.к. то же самое на jquery виджетах делается в 10 раз быстрее и занимает меньше кода. В идеале, возможно было бы здорово совместить jquery виджеты (UI) с angular'овскими модулями (logic), но что-то по-простому это не сращивается.

Не знаю что бы такого в качестве примера привести… За полгода уже подзабылось малость. Ниже идет простенькая директива с кнопками OpenID провайдеров. По сути, приходится темплейты описывать конкатенацией строк, т.е. все описывается декларативно. Если нужно динамически менять какой-нибудь css аттрибут — в темплейт добавляется директива. Если нужен action — добавляется директива. Нужна интернализация — добаляется директива. Форматирование? — директива итд. Так код очень быстро сильно захламляется ненужным синтаксисом. Если же нужно вставить новый блок с другим виджетом динамически… Тут уже траблы. В общем, чем больше виджеты, тем сложнее с ними работать ;)

Если кто подскажет как правильно и эффективно работать с директивами — буду только рад.

angular.module('sipSsoLogin.directive', [ 'sipCommonI18n', 'sipSsoLogin.controller' ]).directive('sipSsoLogin', function () {

    var buttonTemplate = '<button id="sipSsoProvider_%PROVIDER%" ng-click="onProviderSelected(\'%PROVIDER%\')"><div class="sipSsoProvider sipSsoProvider_%PROVIDER%"></div></button>';

    function getProviderButtonTemplate(provider) {
        return buttonTemplate.split("%PROVIDER%").join(provider);
    };

    return {
        restrict: 'E',
        template:
            '<div ng-controller="sipSsoLogin">' +

                '<div class="sipSsoPanel_text" sip-common-i18n="sso.login.directive" />' +
                '<div>' +
                getProviderButtonTemplate('google') +
                getProviderButtonTemplate('yahoo') +
                getProviderButtonTemplate('yandex') +
                getProviderButtonTemplate('twitter') +
                '</div><div>' +
                getProviderButtonTemplate('openid') +
                getProviderButtonTemplate('myopenid') +
                getProviderButtonTemplate('facebook') +
                getProviderButtonTemplate('vkontakte') +
                '</div><div class="sipSsoPanel_inputContainer">' +

                '<button style="float: right; margin: 0px 10px 0px 10px;" sip-common-i18n="sso.button.login"></button>' +
                '<div style="overflow: hidden;" class="sipSsoPanel_inputField">' +
                '<span style="float: left; padding-right: 5px; vertical-align: middle;">{{prefix}}</span>' +
                '<div style="overflow: hidden">' +
                '<input style="display: inline-block; width: 100%;" type="text" value="{{user}}">' +
                '</div>' +
                '</div>' +

                '</div>',
        replace: true
    };

});

Некоторые вещи лучше вначале не опускать, потому что у человека затык будет, если он сразу не поймет откуда что взялось. Можно хотя бы в скобочках кратко (habraHabr эквивалентен habra-habr из атрибута). Пусть упрощенно, главное, чтобы человек понял что это не ошибка/опечатка/выдумка автора, а так и должно быть и пошел бы дальше.

Про $watch то же самое. Незнакомая непонятная функция, опять затык. А так ($watch следит за изменениями переменных). Можно и подробнее расписать. Хоть целый абзац ввести. Если он будет помогать понять логику, то чтение пойдет быстрее, т.к. не придется задумываться над непонятными вещами.

С "{{}}" тогда уж лучше дописать строчку где отчетливо акцентировать внимание на этом. Например, «… внутри выражения "{{}}" (или внутри любой другой, встроенной в наш элемент директивы)», а то получается ни рыба ни мясо :)