Template must have exactly one root element with custom directive replace: true

问题

I am having issues with a custom directive with replace: true,

http://jsbin.com/OtARocO/2/edit

As far as I can tell, I do only have one root element, my , what is going on here?

Error: Template must have exactly one root element. was: 
<tbody>
  <tr><td>{{ item.name }}</td></tr>
  <tr><td>row2</td></tr>
</tbody>

Javascript:

var app = angular.module("AngularApp", [])
  .directive('custom', [function () {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'lineItem.html',
      link: function(scope, element, attrs) {

      }
    };
  }])
.controller('MyCtrl', ['$scope', function($scope) {
  $scope.items = [
    { 
      name: 'foo'
    },
    {
      name: 'bar'
    },
    {
      name: 'baz'
    }
  ];
}]);

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta name="description" content="Angular Avatar Example" />  

  <script src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body data-ng-app="AngularApp">
  <script type="text/ng-template" id="lineItem.html">
    <tbody>
      <tr><td>{{ item.name }}</td></tr>
      <tr><td>row2</td></tr>
    </tbody>
  </script>
  <div data-ng-controller="MyCtrl">
    <table>
      <custom data-ng-repeat="item in items"></custom>
    </table>
  </div>
</body>
</html>

回答1:

Seems to be a known bug of AngularJs.

What you could do is to change the restriction to attribute instead of element, remove the tbody from the template and use a <tbody custom ng-repeat="item in items"> in your html code.

Basically:

Your template becomes:

<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>

Your directive:

return {
  restrict: 'A',
  templateUrl: 'lineItem.html',
  link: function(scope, element, attrs) {

  }
};

And your HTML :

<div data-ng-controller="MyCtrl">
  <table>
    <tbody custom data-ng-repeat="item in items"></tbody>
  </table>
</div>

回答2:

Watch out with comments in directive templates as well! docs

Watch out for html comments at the beginning or end of templates, as these can cause this error as well. Consider the following template:

<div class='container'> 
 <div class='wrapper>
 ...
 </div> <!-- wrapper -->
</div> <!-- container -->

The  comment is interpreted as a second root element and causes the template to be invalid.

回答3:

This error could also occur with an incorrect url to a (non-existing) template. See https://stackoverflow.com/a/34284646/430885

回答4:

Make sure that all the html elements that will be echoed/written to the page, have been wrapped in an envelop. i.e if my template will write a form input that has a label,input[text] and a span. Remember to wrap everything in a div.

i.e

<div>
<label> My Directive Label</label>
<input type='text' ng-model='xyz' />
<span ng-class='errors'></span>
</div> <!-- the root element , the element that envelops everything-->

Another Error you may receive may be "Unterminated string object" which means that the template string has not been terminated properly - to solve this just include a backlash character "\" at the end of each line break i.e

.
.
replace:true,
restrict:'ACE',
template : "<div> \
<label> My Directive Label</label> \
<input type='text' ng-model='xyz' /> \
<span ng-class='errors'></span> \
</div> \
",....

来源：https://stackoverflow.com/questions/19233372/template-must-have-exactly-one-root-element-with-custom-directive-replace-true

标签

angularjs

angularjs-directive