Шаблон должен иметь ровно один корневой элемент с настраиваемой директивой replace: true

У меня возникают проблемы с пользовательской директивой с заменой: true,

Насколько я могу судить, у меня есть только один корневой элемент, мой, что здесь происходит?

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

Кажется, это известная ошибка в AngularJs.

Что вы можете сделать, это изменить ограничение на атрибут вместо элемента, удалить tbody из шаблона и использовать <tbody custom ng-repeat="item in items"> в вашем html-коде.

В принципе:

Ваш шаблон будет выглядеть следующим образом:

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

Ваша директива:

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

  }
};

И ваш HTML:

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

Ответ 2

Следите за комментариями в шаблонах директив! docs

Следите за комментариями html в начале или в конце шаблонов, поскольку они также могут вызвать эту ошибку. Рассмотрим следующий шаблон:

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

Комментарий  интерпретируется как второй корневой элемент и заставляет шаблон быть недопустимым.

Ответ 3

Эта ошибка также может возникать с неправильным URL-адресом для (несуществующего) шаблона. См. fooobar.com/questions/355928/...

Ответ 4

Убедитесь, что все элементы html, которые будут отображаться/записываться на страницу, были завернуты в конверт. т.е. если мой шаблон будет писать ввод формы, который имеет метку, ввод [текст] и диапазон. Не забудьте обернуть все в 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-->

Другая ошибка, которую вы можете получить, может быть "Unterminated string object", что означает, что строка шаблона не была прервана должным образом - для решения этой проблемы просто включить символ обратной реакции "\" в конце каждого разрыва строки 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> \
",....