AngularJS - inject string from model to HTML's tag name

Question

is it possible to inject string into html's tag name with angular?

Something like this:

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

The output I need is:

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

I am also using polymer (this way I am creating the custom html tags).

Do you want that tag to function as an Angular directive, or is this just to be rendered and interpreted by some other engine? If the former, you'll need to call $compile on the content first, will look for a snippet to borrow. — prototype
– prototype, Commented Jun 19, 2014 at 12:41

domakas · Accepted Answer · 2014-06-19 12:46:49Z

2

I think the best solution would be to create a directive which creates custom elements, something like:

.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);
            }
        }
    }
});

Not sure if that will work, but probably that's the way to go...

Note: I don't think it\s a good idea to have dashed separated elements like bettype-1..

answered Jun 19, 2014 at 12:46

domakas

1,2468 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - inject string from model to HTML's tag name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related