角表行指令不在表内呈现

Question

我试图在表中添加一行"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指令不会在表体内呈现.它呈现在表外:

有谁知道可能导致这种行为的原因是什么？

Answer 1

添加我的评论摘要作为答案,因为它似乎有助于OP.:-)

正如GregL指出的那样,replace: true在指令中省略restrict: 'E'和<tr>作为根模板节点将导致无效的标记,从而导致行的错误呈现.

但是,对于那些使用1.2.13之前的Angular版本(浪漫转换)的人,由于已经注意到的问题,该解决方案将不适用.

解决方法是将指令用作属性(即restrict: 'A')并适当地修改模板,使其<tr>不再是根模板节点.这将允许replace: true使用.

Answer 2

我猜想,这是因为你没有指定replace: true的isrcrow指令.因此,最终标记看起来像:

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

哪个是a的直接子<tbody>,这是无效的标记.因此,大多数现代浏览器(例如Chrome和我相信的Firefox)都会尝试通过将<isrcrow>标记移到表格之外来"修复"您的标记.

相反,如果添加replace: true到指令规范中,<isrcrow>则不会呈现该元素,并且浏览器应该只看到有效标记而不是尝试"修复"它.