角度表行指令未在表内呈现

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

添加我的 cmets 的摘要作为答案，因为它似乎对 OP 有所帮助。 :-)

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

但是，对于那些使用 1.2.13 (romantic-transclusion) 之前的 Angular 版本的用户，由于已注明 issue，此解决方案将不适用。

解决方法是使用指令作为属性（即restrict: 'A'）并适当地修改模板，使<tr> 不再是根模板节点。这将允许使用replace: true。

Answer 2

我猜这是因为您没有为isrcrow 指令指定replace: true。因此，最终的标记将如下所示：

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

这将是<tbody> 的直接子代，即invalid markup。因此，大多数现代浏览器（例如 Chrome 和 Firefox，我相信）会尝试通过将 <isrcrow> 标记移出表格来“修复”您的标记以使其有效。

相反，如果您将 replace: true 添加到指令规范中，则不会呈现 <isrcrow> 元素，浏览器应该只会看到有效的标记，而不是尝试“修复”它。

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