Question

我遇到了一个带有replace：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>

Answer 1

似乎是AngularJs的a known bug。

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

基本上：

您的模板变为：

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

Answer 2

注意指令模板中的注释！ docs

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

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

注释被解释为第二个根元素，导致模板无效。

Answer 3

对于（不存在的）模板的错误网址，也可能发生此错误。见https://stackoverflow.com/a/34284646/430885

Answer 4

确保将回显/写入页面的所有html元素都包装在信封中。即如果我的模板将编写一个带有标签的表单输入，输入[text]和span。记得将所有内容都包装在div中。

即

<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> \
",....

模板必须只有一个带有自定义指令replace的根元素：true

4 个答案: