不渲染表里面角表行指令 [英] Angular table row directive not rendering inside table

问题描述

我想一排isrcrow指令添加到表如下：

I am trying to add a row "isrcrow" directive to a table as follows:

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

我experincing问题是isrcrow指令犯规呈现表体的内部。其呈现之外，上表：

The problem I am experincing is the isrcrow directive doesnt render inside the table body. Its rendered outside and above the table:

有谁知道这可能是导致这种行为？

Does anyone knows what could be causing this behaviour?

推荐答案

添加我的意见摘要作为一个答案，因为它似乎已经帮助了OP。 ： - ）

Adding a summary of my comments as an answer since it appeared to have helped the OP. :-)

由于 GregL 指出，省略替换：真正的中与指令限制：'E'和＆LT; TR＆GT; 作为根模板节点将导致无效的标记，引起的行的不正确呈现

As GregL points out, omitting replace: true in a directive with restrict: 'E' and <tr> as the root template node will result in invalid markup, giving rise to the incorrect rendering of the row.

然而，使用一个版本的角之前，<一的href=\"https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1213-romantic-transclusion-2014-02-14\">1.2.13 （浪漫包含），该解决方案将不是由于问题适用有人们注意到。

However, for those using a version of Angular prior to 1.2.13 (romantic-transclusion), this solution will not be applicable due to an issue that has been noted.

一个变通将改为使用该指令作为一个属性（即限制：'A'），并适当地修改模板，从而＆LT; TR＆GT; 不再是根模板节点。这将允许更换：真正的中使用

A work around would be to instead to use the directive as an attribute (i.e. restrict: 'A') and appropriately modify the template such that <tr> is no longer the root template node. This will allow replace: true to be used.

这篇关于不渲染表里面角表行指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！