angularjs – Angular中的动态标签生成

发布时间：2020-12-17 07:08:33 所属栏目：安全来源：网络整理

导读：我试图使用包含一堆指令名称的数组动态生成表单 $scope.components = ["textbox","textbox","radio","checkbox","label"]; 我想使用angular生成带有这些名称的标签.例如 textbox/textboxtextbox/textboxradio/radiocheckbox/checkboxlabel/label--THE FOLLOW

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

$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
>使用另一种方法

解决方法

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

概念证明：(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>

在您的问题中,作为组件的范围内的字符串数组：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!