Директива не работает внутри <tr>, которая связана с ng-repeat

У меня есть таблица, где строки повторяются через ng-repeat. Я пытаюсь создать шаблон, который генерирует столбцы <td> для каждой строки <tr>

app.directive("customtd", function(){
  return {
    restrict: 'E',
    template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>",
    replace: true,
    scope: {
      position: '='
    }
  }
});

<table>
  <tr ng-repeat="p in positions">
    <customtd position="p"></customtd>
  </tr>
</table>

Проблема заключается в том, что мой пользовательский шаблон td вообще не отображается. Здесь я намереваюсь заменить <customtd> на n число <td> - который будет определяться на основе количества свойств на моем объекте данных, но на данный момент я просто пытаюсь получить простую директивную работу, которая выведет два столбца.

MYPLUNKER: показывает экземпляр этой проблемы и код директивы.

Ответы

Ответ 1

Как указано в комментариях, шаблон директивы должен иметь один корневой элемент. Поэтому я предлагаю вам переместить элемент tr в шаблон директивы, например: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

Ответ 2

Как писал Павло, вы можете переместить элемент tr в шаблон для директивы. Другой вариант - использовать элемент td и директиву, который заменяет ваш td на шаблон, который вы хотите использовать.

<table>
  <tr ng-repeat="p in positions">
    <td replace-me template="mytemplate.html" position="p"></td>
  </tr>
</table>

Директива replaceMe

.directive("replaceMe", ["$compile", '$http', '$templateCache', function ($compile, $http, $templateCache) {
        return {
            restrict: 'A',
            scope: {
               position: "="
            },
            link: function (scope, element, attrs) {
                function getTemplate(template) {
                    $http.get(template, {cache: $templateCache}).success(function (templateContent) {
                        element.replaceWith($compile(templateContent)(scope));
                    });
                }
                scope.$watch(attrs.template, function () {
                    if (attrs.template) {
                        getTemplate(attrs.template);
                    }
                });


            }
        }
    }]);

mytemplate.html

<td>{{position.Name}}</td>
<td>{{position.Code}}</td>
<td another-my-directive></td>

plunker