AngularJS - 将模型中的字符串注入HTML的标记名称

Question

是否可以将字符串注入带有角度的html标签名称？

这样的事情：

    <div ng-repeat="type in types">
        <bettype-{{type.id}}></bettype-{{type.id}}>
    </div>

我需要的输出是：

<bettype-1></bettype-1>
<bettype-2></bettype-2>

我也在使用聚合物（这样我就是在创建自定义的html标签）。

Answer 1

我认为最好的解决方案是创建一个创建自定义元素的指令，如：

.directive('bettype', function($compile) {
    return {
        restrict: 'E',
        compile: function($element, $attr) {
            return function($scope, $element, $attr) {
                // Create new element here with $attr.number
                var number = $attr.number,
                    element = angular.element('<bettype-'+number+'></bettype-'+number+'>');
                // Replace newly created element
                $element.replaceWith(element);
                $compile($element)($scope);
            }
        }
    }
});

不确定这是否有效，但可能就是这样......

注意：我不认为像bettype-1这样的虚线分隔元素是个好主意。