Este é um acompanhamento paraessa questão.

Eu estou tentando construir e HTML<table> com múltiplos<tr> linhas. Eu quero que algumas dessas linhas sejam renderizadas pela minha diretivamyDirectiveA e outros a serem renderizados pela minha diretiva 'myDirectiveB'.

Abaixo, você pode ver como meus arquivos são. Tudo funciona bem se houver apenas um<tr> linha no arquivopath/to/myDirectiveA.template.html. Mas assim que adiciono outra linha, recebo o seguinte erro:

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

Ok, então se me é permitido ter apenas um elemento raiz nesse arquivo de modelo, como posso construir minha tabela com várias linhas de várias diretivas? Como é que outras pessoas resolvem esse caso de uso aparentemente comum?

Aqui estão meus arquivos:

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);
  }
);

caminho / para / myDirectiveA.template.html:

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