Динамически зарегистрировать директиву во время выполнения

Question

Обычно директивы регистрируются на модуле с помощью метода directive:

.directive('MyDirective', function (MyDep) { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     controller: function ($scope) { 
     } 
    } 
}); 

Однако, что если я динамически хочу зарегистрировать директивы во время выполнения? Например, предположим, что пользователь тянет следующие данные с сервера:

{ 
    directives: { 
     dir1: { 
      restrict: 'E', 
      template: '<div></div>', 
     }, 
     dir2: { 
      restrict: 'E', 
      template: '<div></div>', 
     } 
    } 
} 

Есть ли способ, что я могу взять эти данные использовать динамически регистрировать новые директивы для моего приложения? В случае успеха я должен иметь возможность динамически генерировать и $compile HTML, который зависит от них.

Answer 1

Это подмножество проблемы с «ленивой загрузкой угловых артефактов» (я изучил here и существуют и другие ресурсы). Идея состоит в том, чтобы использовать функцию config, чтобы «украсть» $compileProvider (ref), а затем позвонить по телефону $compileProvider.directive(...) по запросу, на основе ваших данных.

Грубый эскиз идеи:

var cachedCompileProvider; 
angular.module(...).config(['$compileProvider', function($compileProvider) { 
    cachedCompileProvider = $compileProvider; 
}); 

А потом (например, внутри где-нибудь, что имеет доступ к $http):

$http.get(...).then(function(response) { 
    angular.forEach(response.data.directives, function(dirDefinition, dirName) { 
     cachedCompileProvider.directive(dirName, dirDefinition); 
    }); 
}); 

(Конечно, вы не можете получить функции контроллера от Ответ JSON, как и выше, вам придется использовать другие методы - но, надеюсь, вы получите эту идею.)