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

您不能僅使用角度表達式動態生成元素標記。 但是，您可以創建一個自定義directive來為您完成這項工作。

概念證明:( 演示 ：檢查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'];