AngularJS Миграция - компоненты, генерируемые динамически - PullRequest
0 голосов
/ 05 августа 2020

Мы находимся в процессе миграции приложения 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, поэтому мне нужно найти обходной путь, который позволит мне избавиться от их использования.

Как я могу динамически генерировать компоненты подобным образом, чтобы они работали как раньше?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...