Dynamic Tag Generation in Angular

Question

I am trying to dynamically generate a form using an array that contains a bunch of directive names

$scope.components = [\"textbox\", \"textbox\", \"radio\",          


        

Answer 1

You can't generate tag of elements dynamically using only angular expressions. However you can create a custom directive to do that work for you.

Proof of concept: (Demo: inspect DOM tree to see generated elements)

angular.module('MyModule').directive('dynamicTag', function($compile) {
  return {
    restrict: 'E',
    scope: {
      components: '&components'
    },
    link: function($scope, $element) {
      var components = angular.isFunction($scope.components) ? $scope.components() : [];
      var domElements = [];
      angular.forEach(components, function(c) {
        var domElement = document.createElement(c);
        $compile(domElement)($scope);
        domElements.push(domElement);
      });
      $element.replaceWith(domElements);
    }
  };
});

HTML

<dynamic-tag components="components"></dynamic-tag>

being components an array of strings in the scope as in your question:

$scope.components = ['textbox', 'radio', 'checkbox', 'label'];