angularjs - Angular 中的动态标签生成

Question

我正在尝试使用包含一堆指令名称的数组动态生成一个表单

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

我想使用 angular 生成具有这些名称的标签。例如

<textbox></textbox>
<textbox></textbox>
<radio></radio>
<checkbox></checkbox>
<label></label>

<--THE FOLLOWING DOESN'T WORK BUT WOULD BE COOL IF IT DID-->
<{{component}} ng-repeat="component in components track by $index"></{{component}}> 

现在作为替代方案，我执行以下操作

<div ng-include="component + '.html'" ng-repeat="component in components track by $index"></div>

这基本上完成了指令对 templateUrl 参数所做的事情。我是不是该

制作一个生成标签的指令

继续像我一样使用 ng-include

使用另一种方法

Answer 1

您不能仅使用 Angular 表达式动态生成元素标签。但是，您可以创建自定义 directive为你做这项工作。

概念证明: ( Demo :检查 DOM 树以查看生成的元素)

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>

正在 components范围内的字符串数组，如您的问题所示:
$scope.components = ['textbox', 'radio', 'checkbox', 'label'];