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

时间:2014-06-19 12:25:49

标签: javascript html angularjs

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

这样的事情:

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

我需要的输出是:

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

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

1 个答案:

答案 0 :(得分:2)

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

.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这样的虚线分隔元素是个好主意。