Мы находимся в процессе миграции приложения AngularJS на Angular, в частности, продвижения всех наших директив в компоненты.
Часть этого связана с динамической генерацией директив. Есть <cbf-base>
(это единственный, который мы фактически используем напрямую), который получает p
в привязке. p
, в свою очередь, содержит type
, который определяет, какую небазовую директиву загружать.
Например, если p.type = 'text'
, <cbf-text>
будет скомпилирован, а тег HTML .anchoring
в base_template.html
будет заменено на него. Его цель - динамически генерировать формы на основе схемы JSON, перебирая все поля и создавая поля с cbf-base
каждое. Примерно так:
cbf-base(ng-repeat="p in properties", p="p")
Ниже приведен код базовой директивы (теперь наполовину сделанной как компонент):
angular.module('myModule')
.component('cbfBase', {
templateUrl: '<base_template.html>',
bindings: {
p: '='
},
controller: ['$scope', '$element', '$compile', function($scope, $element, $compile) {
var ctrl = this;
ctrl.$onInit = function() {
var html = '<cbf-' + ctrl.p.type + ' s = "s">';
var directive = $compile(html)($scope);
$element.find('.anchoring').replaceWith(directive);
}
}]
});
Это явно не годится - на С одной стороны, $scope
не может быть введен в компонент, а $compile
больше не присутствует в более поздних версиях Angular, поэтому мне нужно найти обходной путь, который позволит мне избавиться от их использования.
Как я могу динамически генерировать компоненты подобным образом, чтобы они работали как раньше?