<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指令不呈现在表体内。它在桌子外面和上面：

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