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

This is a follow-up to this question.

这是这个问题的后续。

I am trying to build and HTML <table> with multiple <tr> rows. I want some of these rows to be rendered by my directive myDirectiveA and others to be rendered by my directive 'myDirectiveB'.

我正在尝试用多个行构建和HTML

。我想让我的指令myDirectiveA和其他人呈现的这些行由我的指令“myDirectiveB”呈现。

Below you can see what my files look like. It all works fine if there is only one <tr> row in the file path/to/myDirectiveA.template.html. But as soon as I add another row in there, I get the following error:

下面你可以看到我的文件。如果在文件路径/to/myDirectiveA.template.html中只有一行，那么这一切都可以正常工作。但是当我在这里添加另一行时，我得到了以下错误:

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

Ok, so if I am allowed only to have one root element in that template file, then how can I construct my table with multiple rows from various directives? What is the way other people solve this seemingly-common use-case?

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

Here are my files:

这是我的文件:

main.html:

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:

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:

路径/ / myDirectiveA.template.html:

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

1 个解决方案

#1

Use this in the app

在app中使用这个。

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

and this in the directive template

在指令模板中

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

It allows you to have only one root element in your directive, and add more than one TR inside of it.

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

#1