Как динамически создать директиву в контроллере AngularJS ?

Question

[Роман]

Всем привет!
Есть следующая задача:
В SPA на AngularJS в конкретном контроллере нужно динамически объявить директиву, полученную с сервера с помощью AJAX.
На сервере у меня хранятся директивы, описывающие формы ввода (более 3000 форм).
Точнее, директиву я объявляю один раз, но ее реализацию хочу задавать динамически на основе полученных данных.

Пробовал следующее:

// метод контроллера
$scope.add = function(ev,attrs){
        //ajax вызов
        .success(function (data, status, headers, config) {
        // получили директиву с сервера
        var exFormDirective = data.newForm;
       // добавили ее к модулю
        myApp.directive('exForm', exFormDirective );
       // динамически создали элемент
       var exFunction = angular.element(document.createElement('ex-Form'));
       // скомпилировали 
       var el = $compile( exFunction )( $scope );
       // Добавили созданный элемент на страницу
        angular.element(document.getElementById('exTempleate')).append(exFunction);

Ошибок никаких не получаю при выполнении, но и директива динамически не создается ((
Если то же самое сделать с заранее описанной и подключенной директивой (т.е. подключать не в контроллере, а стандартно) - то все работает.
Но так как директив очень много - то все оформить заранее представляется невыполнимой задачей.
Предполагаю, что дело в

// добавили ее к модулю
        myApp.directive('exForm', exFormDirective );

но что именно не так, может кто-то подскажет ?

Comments

[Сергей Протько]

зачем вам angular если вы пишите в стиле jQuery?

[Роман]

@Fesor: почему в стиле jQuery ?

[Сергей Протько]

@uaKorona: потому что у вас возникают подобные задачи и они почему-то выполняются в контроллерах. Просто брюзжание, не обращайте внимания.

[Роман]

Я считаю, что это важное замечание. А как бы вы организовали выполнение такой задачи? Вынесли бы в сервис ? Так его все равно нужно где-то вызвать ...в контоллере, по моему мнению.

[Роман]

@Fesor: понятно, я почему-то так и подумал, что не ответите на конкретный вопрос.

[Сергей Протько]

@uaKorona: извините, в потоке нотификаций упустил ваш комментарий. Можете привести пример одной из ваших 3К директив?

Если я правильно понимаю задачу, вы хотите что бы формы можно было настраивать на сервере и генерить на клиенте. Если это так, то я бы делал так: на сервере конфиг для директивы в формате json, у нас есть сервис который умеет по id нашей формы или еще как-то загружать эти настройки и формировать темплейт формы. Этот сервис использует директива myForm или что-то в этом духе, которая в зависимости от значений атрибутов дергает сервис. В итоге контроллеры нам не нужны. Либо этот контроллер будет к myForm директивы.

[Роман]

Речь идет о платежной системе. В данном случае директивы содержат формы оплаты услуг: мобильные операторы, банковские кредиты, онлайн-игры и т.д.

Часть этих форм параметризована. Т.е. описана в виде набора полей, который можно выставить в настройках и контроллер получив json описание - построит соответствующую форму.

Часть таких форм не возможно (очень сложно параметризовать). Например, форма которая требует онлайн запроса проверки реквизитов, введенных пользователем. И на основании указанных данных - отображает следующую форму. (Пользователь ввел лицевой счет - получил в ответ информацию о задолженности - ввел сумму - получил размер комиссии и т.д.)

Для таких случаев я и искал механизм динамического переопределения директивы. Конечно, директивы получаемые таким образом, будут заранее созданы и оттестированы.

Если схематически, то получается такая архитектура:
Представление: {
Параметризованные формы: {}
Динамическая директива: {}
}
Контроллер: {
Стандартные функции: {},
Функция определения динамической директивы: {}
}

Answer 1

[Alexander Sydorenko]

Вот здесь что-то есть о Вашей проблеме
stackoverflow.com/questions/15279244/dynamically-a...
jsfiddle.net/ftfish/KyEr3

Но суть одна, директива должна быть подключена.. Возможно не участвовать в текущей html выдаче, а описываться из кода полученного по аяксу, но сам код директивы(контроллеров, линкеров, и.т.д) должен присутствовать.

А иначе.. что то типа этого weblogs.thinktecture.com/pawel/2014/07/angularjs-d...

Comments

[Роман]

Спасибо, похоже на то, что я искал ).
А что значит эта конструкция:
(function () {
// code
})();

[Alexander Sydorenko]

@uaKorona: Анонимная функция которая будет вызвана сразу после инициализации. То-есть инициализация функции, и тут же ее вызов.

[Роман]

А можете объяснить, для чего это нужно ? этим ограничивается область видимости ?

[Alexander Sydorenko]

@uaKorona: Область видимости ограничивается границами каждой функцией, но по сути такая запись эквивалентна записи

function someWork() {
    ...
}
someWork();

[Роман]

@San40: спасибо еще раз :)