Shawn Shawn - 1 year ago 71
AngularJS Question

AngularJS - how to include a template without a wrapper

For example I have a template like the following.



I want to include it anywhere I want without a wrapper, so the result is like this:


I can't use
because it has a wrapper

I tried creating a directive with
, but an error says the template must have only one root element.

If it is a comment directive without
, then the template won't show.

What should I do? I need this because a wrapper will mess up the layout.

Answer Source

try this:

app.directive('i', ['$interpolate', function($interpolate) {
  return {
    scope: {
      i: '<'
    template: '<div>{{ i.text1 || \'DIV1\' }}</div><div>{{ i.text2 || \'DIV2\' }}</div>',
    link: function (scope, element, attrs) {

here is plunker

you can pass text variables to be printed, if not passed - devault 'DIV1' and 'DIV2' will be printed