AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

Question

这是 this question 的后续。

我正在尝试构建 HTML <table> 多个 <tr> 行。我希望其中一些行由我的指令 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`

好吧，如果我只被允许在该模板文件中有一个根元素，那么我如何用来自不同指令的多行构造我的 table？其他人解决这个看似常见的用例的方法是什么？

这是我的文件：

main.html:

<div ng-controller="MainCtrl as mainCtrl">
  <table width="40%" 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>

Answer 1

在应用程序中使用它

<table width="40%" 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。

AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

html

javascript

html-table

angularjs

angular-directive