Angularjs 角度传感器中的动态标记生成

我试图使用一个包含一组指令名的数组动态生成一个表单

$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}}> 

不能仅使用角度表达式动态生成元素标记。但是，您可以创建一个自定义的
指令
，为您完成这项工作

概念验证：（：检查DOM树以查看生成的元素）

HTML

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



作为
组件
范围内的字符串数组，如您的问题所示：

$scope.components=['textbox'，'radio'，'checkbox'，'label']
如果不了解你想要实现的目标的大局，就很难回答你的问题。你对你目前的方法有什么问题吗？我同意，如果它没有坏，不要修复它，我只是想知道最好的做法是什么…谁知道也许有一些隐藏的宝石，我可以利用在未来你会碰巧知道如何重新编译文件后？指令不会自然地响应新元素yap，请使用编译服务进行响应。我编辑了答案。我在指令中添加了一行，并更改了演示链接。
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);
    }
  };
});

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