Angular директива строки таблицы не рендеринг внутри таблицы

Я пытаюсь добавить строку "isrcrow" в таблицу следующим образом:

<table class="table">
        <thead><tr>
                   <th>Artist Name</th>
                   <th>Track Title</th>
                   <th>Version</th>
                   <th>Track Duration</th>
                   <th>Recording Year</th>
                   <th></th>
               </tr>
        </thead>
        <tbody>
            <isrcrow></isrcrow>
        </tbody>       

    </table>

Вот директива:

(function() {
  var isrcorderapp;

  isrcorderapp = angular.module("isrcorderapp", []);

  isrcorderapp.controller("isrcordercontroller", function($scope, $http) {
    return $scope.recordingTypes = [
      {
        type: 'Single'
      }, {
        type: 'Album'
      }, {
        type: 'Live'
      }, {
        type: 'Concert'
      }, {
        type: 'Instrumental'
      }
    ];
  });

  isrcorderapp.directive("isrcrow", function() {
    return {
      restrict: 'E',
      template: '<tr>\
                <td><input id="artist" ng-model="name"/></td>\
                <td><input id="track"/></td>\
                <td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
                <td><input id="duration"/></td>\
                <td><input id="year"/></td>\
                <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\
                    <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\
                </td>\
            </tr>',
      scope: {
        name: '='
      },
      link: function(scope, element, attr) {}
    };
  });

}).call(this);

Проблема, которую я испытываю, - это директива isrcrow не отображает внутри тела таблицы. Он отображается вне и над таблицей:

Кто-нибудь знает, что может вызвать такое поведение?

Ответы

Ответ 1

Добавление резюме моих комментариев в качестве ответа, поскольку оно, похоже, помогло ОП.: -)

Как GregL указывает, опуская replace: true в директиве с restrict: 'E' и <tr>, поскольку корневой шаблон node приведет к недействительности разметки, что приводит к некорректному рендерингу строки.

Однако для тех, кто использует версию Angular до 1.2.13 (романтический перевод), это решение не будет что связано с issue, который был отмечен.

Работа должна заключаться в том, чтобы вместо этого использовать директиву как атрибут (т.е. restrict: 'A') и соответствующим образом модифицировать шаблон таким образом, чтобы <tr> больше не был корневым шаблоном node. Это позволит использовать replace: true.

Ответ 2

Я бы предположил, что это связано с тем, что вы не указали replace: true для директивы isrcrow. В результате окончательная разметка будет выглядеть так:

<isrcrow>
    <tr>
        <td>...</td>
        ...
        <td>...</td>
    </tr>
</isrcrow>

Какой будет прямой дочерний элемент <tbody>, который недействительная разметка. В результате большинство современных браузеров (например, Chrome, а также Firefox, я полагаю) попытаются "исправить" вашу разметку, чтобы быть действительными, перемещая тег <isrcrow> вне таблицы.

Вместо этого, если вы добавите replace: true в свою спецификацию директивы, элемент <isrcrow> не будет отображаться, и браузер должен увидеть только действительную разметку и не пытаться "исправить" ее.

Ответ 3

Предыдущие ответы верны, но я нашел их немного трудно понять/применить, поэтому резюмировал, как я решил это с их помощью:

Таблица

<tbody>
    <tr isrcrow ng-repeat="..."></tr>
</tbody>

Шаблон директивы isrcow (без tr, ни одного корня)

<td></td>
<td></td>
...

Директива isrcrow с

restrict: 'A'
replace: false

Конечные результаты

<tbody>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     ...
</tbody>