我正在尝试使用包含一堆指令名称的数组动态生成表单
$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
- 使用另一种方法
您无法仅使用角度表达式动态生成元素的标签。但是您可以创建自定义directive
为您做这项工作。
概念证明: (Demo http://plnkr.co/edit/ssJUAtzWk0Eh8EZVwcGc?p=preview:检查 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>
being components
您的问题范围内的字符串数组:
$scope.components = ['textbox', 'radio', 'checkbox', 'label'];
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)