Angular table row directive not rendering inside table

Question

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>

Here is the directive:

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

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?

If you are out of options, I recommend making isrcrow an attribute, and instead have <tr isrcrow></tr> in your HTML, which obviously means modifying your template code to exclude the <tr>s. — miqh
– miqh, Commented Feb 26, 2014 at 2:28
I have the same problem. But my thing works in IE, not in Chrome. — diwatu
– diwatu, Commented Jul 14, 2014 at 18:13

Community · Accepted Answer · 2017-05-23 11:54:18Z

30

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

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.

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 28, 2014 at 6:59

miqh

3,6642 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GregL · Accepted Answer · 2015-10-07 22:48:13Z

7

I would guess that this is because you have not specified replace: true for the isrcrow directive. As a result, the final markup would look like:

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

Which will be a direct child of a <tbody>, which is invalid markup. As a result, most modern browsers (e.g. Chrome, and also Firefox, I believe) will try to "fix" your markup to be valid by moving the <isrcrow> tag outside of the table.

Instead, if you add replace: true to your directive specification, the <isrcrow> element won't be rendered, and the browser should see only valid markup and not try to "fix" it.

edited Oct 7, 2015 at 22:48

answered Feb 26, 2014 at 2:21

GregL

38.2k8 gold badges65 silver badges68 bronze badges

1 Comment

miqh Over a year ago

For older versions of Angular, there is an issue concerning replace: true for directives having a template root of <tr>. (cf. github.com/angular/angular.js/issues/1459)

Kristjan Liiva · Accepted Answer · 2016-06-22 10:10:30Z

0

The previous answers are correct, but I found them a bit hard to understand/apply, so summarized how I solved it with their help:

The table

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

The isrcow directive template (without tr, no single root)

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

The isrcrow directive with

restrict: 'A'
replace: false

The end results is

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

answered Jun 22, 2016 at 10:10

Kristjan Liiva

9,6593 gold badges28 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular table row directive not rendering inside table

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related