AngularJS 错误：指令“XXXXXX”的模板必须只有一个根元素

Posted 2023-03-05

【中文标题】AngularJS 错误：指令“XXXXXX”的模板必须只有一个根元素

【英文标题】：AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

【发布时间】：2017-02-02 15:46:15

【问题描述】：

这是this question的后续行动。

我正在尝试使用多个 <tr> 行构建和 html <table>。我希望其中一些行由我的指令myDirectiveA 呈现，而其他行由我的指令'myDirectiveB' 呈现。

您可以在下面看到我的文件的样子。如果文件path/to/myDirectiveA.template.html 中只有一个<tr> 行，则一切正常。但是一旦我在那里添加另一行，我就会收到以下错误：

`angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html`

好的，所以如果我只被允许在该模板文件中有一个根元素，那么如何从各种指令构建包含多行的表？其他人如何解决这个看似常见的用例？

这是我的文件：

ma​​in.html:

<div ng-controller="MainCtrl as mainCtrl">
  <table  border="1">
    <tbody>
      <tr my-directive-a a="mainCtrl.a"></tr>
    </tbody>
  </table>
</div>

app.js：

myApp.directive('myDirectiveA',function()
  return 
    'replace': true,
    'restrict': 'A',
    'scope': 
      'a': '='
    ,
    'controller': 'MyDirectiveACtrl',
    'controllerAs': 'MyDirectiveACtrl',
    'bindToController': true,
    'templateUrl': "path/to/myDirectiveA.template.html"
  ;
);


myApp.controller('MyDirectiveACtrl', function($scope)
    var self = this;
    $scope.$watch(function() return 'a': self.a;, function (objVal) ,true);
  
);

path/to/myDirectiveA.template.html：

<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>MyDirectiveACtrl.a.b</td>
</tr>

【问题讨论】：

您的指令模板必须是简单的div，如<div>you template...</div> 或任何根元素。

Guarav，我不太明白你的评论。你能澄清一下吗？

您的指令模板必须在根元素内。

我在这里发布了一个后续问题：***.com/questions/39684298/…

【参考方案1】：

在应用中使用它

<table  border="1">
  <tbody  my-directive-a a="mainCtrl.a">
  </tbody>
</table>

指令模板中的这个

<tbody>
<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>MyDirectiveACtrl.a.b</td>
</tr>
<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>MyDirectiveACtrl.a.b</td>
</tr>
</tbody>

它允许您在指令中只有一个根元素，并在其中添加多个 TR。

【讨论】：

但问题是，有时当我使用my-directive-a 时，我希望这些行位于tbody 中，而其他时候我希望它们位于tfoot 或thead 中。我不能在my-directive-a 的模板文件中硬编码该标签。

像解决方法一样，您可以在 TR 指令上使用 ng-repeat 吗？

或者你可以在指令中使用模板作为一个函数，并用另一个标签替换 TBODY

这有效：<tr ng-repeat="currRow in [0, 1, 2, 3] track by $index"><td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td><td bgcolor='#ff1493'>MyDirectiveACtrl.a.b</td></tr>。谢谢！！！！！现在我可以在<tr> 中放入一些特定的逻辑，检查currRow 的值，并在每种情况下做一些不同的事情。优秀！ （尽管 Angular 强迫我为这个用例使用一种变通方法）

我在这里发布了另一个后续问题：***.com/questions/39684298/…