Template for directive must have exactly one root element

Question

I am new to angularJs. I am trying to create new directive which contains input element and a button. I want to use this directive to clear input text when button is clicked.

When I use my directive in html I am getting below error :

Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element. 

html:

<div class="input-group">
         <cw-clearable-input ng-model="attributeName"></cw-clearable-input>
 </div>

clearable_input.js:

angular.module('cw-ui').directive('cwClearableInput', function() {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    transclude: true,
    replace: true,
    template: '<input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span>',
    controller: function( $scope ) {

    }
};
});

I am not able to figure it out how to achieve this.

Solution 1

Well, the error is pretty self-explanatory. Your template needs to have a single root and yours has two. The simplest way to resolve this would be to just wrap the whole thing in a div or a span:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

Before:

<input type="text" class="form-control"/>
<span class="input-group-btn">
  <button type="button" class="btn" ng-click="" title="Edit">
    <span class="glyphicon-pencil"></span>
  </button>
</span>

After:

<div>    <!--  <- one root   -->
  <input type="text" class="form-control"/>
  <span class="input-group-btn">
    <button type="button" class="btn" ng-click="" title="Edit">
      <span class="glyphicon-pencil"></span>
    </button>
  </span>
</div>

Solution 2

This error will also occur if the path to the template is incorrect, in which case the error is everything but explanatory.

I was referring the template from within templates/my-parent-template.html with the (incorrect)

template-url="subfolder/my-child-template.html"

I changed this to

template-url="templates/subfolder/my-child-template.html"

which solved it.

Solution 3

Just wrap your template in something:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

Solution 4

If you don't want to make one root element you can instead set replace to false. In your directive you are setting it to true, which replaces the directive tag "cw-clearable-input" with the root element of your directive.

Solution 5

If you have a comment in your template alongside the root element in the directive template, you will see the same error.

Eg. If your directive template has HTML like this (with "replace" set to true in the directive JS), you will see the same error

<!-- Some Comment -->
<div>
   <p>Hello</p>
</div>

So to resolve this in scenarios where you want to retain the comments you will need to move the comment so that it is inside the template root element.

<div>
   <!-- Some Comment -->
   <p>Hello</p>
</div>

View more solutions

Comments

[StevieP]

Also - it throws the same error if you use template when you should be using templateUrl.

[Androclus]

Also (at least for AngularJS 1.3.2) it threw this error for me when I mistakenly left off a quote on one of the attribute values, e.g., template: '<rect a="b" c="d /> ... That last quote is missing and threw the error.

[georgeliatsos]

That was my case - thanks for the answer!

[georgeliatsos]

See also answer from @ami91 for complementary solution.