12

我在使用 replace: true 的自定义指令时遇到问题，

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

据我所知，我只有一个根元素 my ，这是怎么回事？

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>
4

4 回答 4

19

似乎是AngularJs的一个已知错误。

您可以做的是将限制更改为属性而不是元素，tbody从模板中删除并<tbody custom ng-repeat="item in items">在您的 html 代码中使用 a 。

基本上：

您的模板变为：

<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>
于 2013-10-07T20:11:24.330 回答
3

还要注意指令模板中的注释！ 文档

注意模板开头或结尾的 html 注释，因为这些也会导致此错误。考虑以下模板：

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

注释被解释为第二<!-- container -->个根元素并导致模板无效。

于 2016-02-16T19:36:31.793 回答
0

确保将回显/写入页面的所有 html 元素都已包装在一个信封中。即，如果我的模板将编写一个具有标签、输入[文本] 和跨度的表单输入。请记住将所有内容包装在 div 中。

IE

<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-->

您可能收到的另一个错误可能是“未终止的字符串对象”，这意味着模板字符串没有正确终止 - 要解决这个问题，只需在每个换行符的末尾包含一个反斜杠字符“\”，即

.
.
replace:true,
restrict:'ACE',
template : "<div> \
<label> My Directive Label</label> \
<input type='text' ng-model='xyz' /> \
<span ng-class='errors'></span> \
</div> \
",....
于 2016-03-29T23:52:53.040 回答
0

如果（不存在的）模板的 URL 不正确，也可能会发生此错误。见https://stackoverflow.com/a/34284646/430885

于 2015-12-15T08:51:53.307 回答